react setState执行机制

setState是异步的

1 .调用setState是不会立即更新的
2 .所有组件使用的是同一套更新机制，当所有组件didmount之后，父组件didmount，然后统一执行更新
3 .更新时会把每个组件的更新合并，每个组件只会触发一次更新后的生命周期

异步函数和原生事件中的setState

1 .用setTimeout模拟异步和回调接口执行情况
2 .在这种情况下，setState会同步更新的

setState更新机制

this.setState({ index: this.state.index + 1 }, () => {
            console.log(this.state.index);
          })
        this.setState({ index: this.state.index + 2 }, () => {
            console.log(this.state.index);
        })
        // 使用对象合并的setState操作，如果是同一个值的话，会合并成一条执行，其实这里只是执行了第二条，但是第一条里面的打印日志也会显示为2


        this.setState((preState) => ({ index: preState.index + 1 }), () => {
            console.log(this.state.index);
          })
        this.setState(preState => ({ index: preState.index + 2 }), () => {
            console.log(this.state.index);
        })
        // 使用函数方式进行更新，是不会被合并的，就算是更新同一个值，同理，第一个也会打印出3

执行state流程

1 .将setState传入的partialState参数存储在当前组件实例的state暂存队列中
2 .判断当前React是否处于批量更新状态，如果是，将当前组件加入待更新的组件队列中去
3 .如果未处于批量更新状态，将批量更新状态标识未true,用事务再次调用前一步的方法，保证当前组件加入了待更新的组件队列中去
4 .调用事务的waper方法，遍历待更新组件队列依次执行更新
5 .执行生命周期componentWillReceiveProps
6 .将组件的state和暂存队列中的state进行合并，得到最新的state对象，并将队列置为空
7 .执行生命周期componentShouldUpdate，根据返回值判断是否要更新。那这里不更新的时候，值还会倒退回去吗？
8 .执行生命周期componentWillUpdate
9 .执行真正的更新 render
10 .执行生命周期comonentDidUpdate
11 .当上一次更新机制执行完毕，以生命周期为例，所有组件，最顶层组件的didmount之后将isBranchUpdate设置为false,执行之前累积的setState
12 .

componentDidMount 调用setState

1 .component中可以使用setState，这将会导致额外触发一次渲染，虽然他将在浏览器刷屏幕前发生。容易导致性能问题
2 .但是有一些情况是不可避免地，比如某些状态必须依赖dom地属性
3 .可以在componentDidMount中调用接口，回调中去进行setState操作
4 .componentWillUpdate,componentDidUpdate中是不能调用setState，会导致死循环的。