React setState解析

async.png

setState

setState是React中用于设置组件状态相关数据的，通常用于需要对state进行修改的时候进行使用。由于React提供给用户这个接口，而用户可以随时多次对相同或不同的state进行修改，正如事件一样，无法预知何时会触发，故React设计时setState是异步执行的，默认接收两个参数，一个是需要修改的state对象, key-value；另一个则是回调函数，用于在设置完成后执行。

setState.png

  addToList(val) {
    let list = this.state.list    // ['a','b']
    this.setState({
      list: list.concat(val)   // 'c'
    })
    console.log(this.state.list)  // 还是['a','b']
  }

为什么setState要设计为异步？

关于理由上面已经进行了简要概述，下面详细进行列举

1. 可能会一次执行多次setState
2. 无法规定和限制用户如何使用setState
3. 没有必要每次setState都重新渲染，节约性能
4. 即使每次都重新渲染，中间过程也不重要，重要的是最后一次设置。
5. 用户只关心最后的结果

setState的过程

1. 每个组件实例，都有一个renderComponent方法
2. 执行renderComponent会重新执行实例的render
3. render执行返回新的vnode
4. renderComponent对比之前保存的vnode与新的vnode，执行patch(prevnode, newvnode) 即通过diff算法找出最少需要修改的部分，完成setState过程