关于React的setState

文章参考 React官方文档 知乎专栏

state和props

state（状态）和props（属性）是React组件渲染需要的数据，不同的是state是组件私有的，完全由组件自身维护；props由父组件传递给当前组件。

可以在class组件的constructor中初始化state，这是唯一能给state赋值的地方。如果要改变state，不能以this.state.xxx = xxx这种形式赋值，这样做React会认为state没有改变，组件不会更新。需要调用React组件的setState方法更新state

class Counter extends React.Component{ 
    constructor(props){
        super(props)
        this.state = {
            count: 0
        }
     }
     // render
}

setState是异步的吗？

React文档中有一句话“出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。”也就是说，我们在setState后想用最新的state去做一些计算时，可能不会拿到我们想要的值。

但这并不代表setState一定是异步的，这个方法的实现本身是一个同步的流程，但React出于性能考虑，在某些场景下会使setState的值异步更新。可以理解为setState本身不是异步的过程，但React不保证setState一定是同步的。

合成事件中的setState

React为了解决跨平台问题，兼容所有浏览器，自己封装了一套浏览器的原生事件的跨浏览器包装器，即合成事件。onClick、onFocus、onBlur这些都是合成事件。

如图所示，通过点击事件改变count状态的值，setState后在控制台输出的还是原来的值，合成事件中的setState不是同步的。

生命周期中的setState

生命周期中调用setState方法，React同样没有立即更新state，而是等componentDidUpdate执行完后再执行setState

原生事件中的setState

与合成事件不同，原生事件中setState后可以直接拿到更新后的state值

setTimeout中的setState

可以在原生事件、合成事件、生命周期中使用setTimeout，不管是哪种场景，由于JS event loop机制，setTimeout中setState后总能拿到最新的state