说说React中setState执行机制

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

异步函数和原生事件中的setState
        1 .用setTimeout模拟异步和回调接口执行情况
        2 .在这种情况下，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
             

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

总结：
一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state
当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用，可以通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新