React-state(状态)

state相当于vue的data，也就是用于存放数据，但使用上和data却很不一样

下面例子中，创建一个类组件，在类组件的构造函数constructor中定义this.state,并进行赋值，在render()函数中，直接使用this.state.xxx即可访问state的数据

import React from 'react'
import ReactDOM from 'react-dom'


class Clock extends React.Component {
    constructor (props) {
        super (props)
        // 状态(数组)=>view
        this.state = {
            time: new Date().toLocaleTimeString()
        }
    }    
        // 渲染元素
        render () {
            // 通过return模板的形式
            return (
                <div>
                    <h1>当前时间：{this.state.time}</h1>
                </div>
            )
        }
    
}

ReactDOM.render(
    <Clock />,
    document.getElementById('root')
)

但是，需要注意的是，这个时候页面中的时间是不会自动变化的，只有刷新页面才会重新变化，根据上几篇文章的做法是，通过setInterval，每隔一秒钟渲染一次，可是结果如下：
注意，在setInterval和构造函数中添加了输出函数

import React from 'react'
import ReactDOM from 'react-dom'


class Clock extends React.Component {
    constructor (props) {
        super (props)
        // 状态(数组)=>view
        this.state = {
            time: new Date().toLocaleTimeString()
        }
        console.log('this.state.time=' + this.state.time)
    }    
        // 渲染元素
        render () {
            // 通过return模板的形式
            return (
                <div>
                    <h1>当前时间：{this.state.time}</h1>
                </div>
            )
        }
    
}



setInterval(() => {
    ReactDOM.render(
        <Clock />,
        document.getElementById('root')
    )
    console.log(new Date())
}, 1000)

可以看到，只有setInterval的console每隔一秒有输出，而构造函数的console只输出一次
这是因为：React会默认认为构造函数的数据时不变的，所以没有进行重新初始化，这在一定程度上是进行了优化，可是有时候却不能满足需求

但是需要注意的是，虽然构造函数不会每次都初始化，但是渲染函数是每次都会执行的，随意可以选择在render函数中修改时间
注意，这只是一个解决的办法，但是不推荐使用，推荐使用生命周期的方法，这个在下篇文章中详说

import React from 'react'
import ReactDOM from 'react-dom'


class Clock extends React.Component {
    constructor (props) {
        super (props)
        // 状态(数组)=>view
        this.state = {
            time: new Date().toLocaleTimeString()
        }
        // console.log('this.state.time=' + this.state.time)
    }    
        // 渲染元素
        render () {
            // 通过return模板的形式
            this.state.time = new Date().toLocaleTimeString() 
            return (
                <div>
                    <h1>当前时间：{this.state.time}</h1>
                </div>
            )
        }
    
}

setInterval(() => {
    ReactDOM.render(
        <Clock />,
        document.getElementById('root')
    )
    // console.log(new Date())
}, 1000)