state

state是一个类函数组件的私有属性，只能由本组件初始化，由本组件修改和访问，不能被外部访问或者修改；如果更新它就会重新渲染用户界面，也就是说，用户的界面是随着state的状态改变而改变的。

创建一个时钟：

1.创建初始的时钟暴漏出来：

Clock.js

import React from 'react';

class Clock extends React.Component{
    constructor(props) {
        super(props);
        this.state = {data: new Date()}
    }
    render() {
        const element=<div>
            <h1>time is {this.state.data.toLocaleTimeString()}</h1>
        </div>
        return (
            element
        )
    }
}
export default Clock

2.在生命周期中添加更新时间的方法

    componentDidMount() {//在第一渲染完之后调用，和vue中的mounted一样
        this.time=setInterval(()=>{
            this.tick()//更新this.state.data
        },1000)
    }
    componentWillUnmount() {//DOM移除之前调用，和vue中的beforDestroy
        clearInterval(this.time)
    }

在生命周期中，第一次渲染完成之后创建一个计时器，在DOM移除之前，将计时器清除

3.更新this.state.data的方法

    tick(){
        this.setState({
            data:new Date()
        })
    }

这样我们就完成一个自动更新的时钟。

setState使用的三件事

1.不要直接对state进行赋值

this.state.a= 'Hello';//这样是不会更新视图的
this.setState({a:'Hello'});//这是对的

2.state的更新可能是异步的

出于性能方面的考虑，React 可以将多次的 setState() 调用合并为一次

因为 this.props 和 this.state 可能是异步更新的，你不应该用它们当前的值去计算下一个 state 的值

3.state的更新会被合并

如下：

    componentWillMount() {//渲染前
        console.log(this.state);
        this.setState({a: 8});//将a改成8
    }

    componentDidMount() {
        console.log(this.state);
    }

发现只是将a改成8而不是将整个state都改成了{a:8}。

此条警告是由于使用的生命周期函数已经过时，需要使用UNSAFE_componentWillMount。