1.组件挂载图

• 了解生命周期函数的执行顺序

2.生命周期执行顺序

尝试一下php

• 能够看到在组件在组件初始化时，只执行以下三个方法：

• 在父组件状态改变时，依次执行的生命周期函数是：

• 我试着分别在这几个生命周期函数中setState了一下，发如今componentWillUpdate、render、componentDidUpdate 中会报错，也就是说在componentWillUpdate、render、componentDidUpdate中不能够setState。

1.那么问题来了这些周期方法为何不能够setState？
2.setState异步机制，怎么处理，setState（函数）？html

componentDidMount() {
    SynapseAnalytics.init({ type:Enum.pageTypeEnum.otherPage });
    this.setState({
        val:this.state.val + 1
    });
    //第一次输出  0
    console.log(this.state.val);
    this.setState({
        val:this.state.val + 1
    });
    //第二次输出 0
    console.log(this.state.val);
    setTimeout(()=>{
        this.setState({val:this.state.val + 1});
        //第三次输出 2
        console.log(this.state.val);
        this.setState({
            val:this.state.val + 1
        });
        //第四次输出 3
        console.log(this.state.val);
    }, 0);
}

• 依次输出0、0、二、3；由于react并非setState以后state的值就会改变的，如果这样就太消耗内存了，失去了setState存在的意义。
• 这里存在一个setstate调用栈的问题，问题来了setState以后都发生了什么？
• 1.this.setState(newState) =>
• 2.newState存入pending队列 =>
• 3.调用enqueueUpdate =>
• 4.是否处于批量更新模式 => 是的话将组件保存到dirtyComponents
• 5.不是的话遍历dirtyComponents，调用updateComponent,更新pending state or props
• enqueueUpdate的源码以下：

 function enqueueUpdate(component){
       //injected注入的
       ensureInjected();
       //若是不处于批量更新模式
       if(!batchingStrategy.isBatchingUpdates){
           batchingStrategy.batchedUpdates(enqueueUpdate, component);
           return;
       }
       //若是处于批量更新模式
       dirtyComponents.push(component);
   }

• 若是isBatchingUpdates为true，则对全部队列中的更新执行batchedUpdates方法，不然只把当前组件(即调用了setState的组件)放入dirtyComponents数组中，例子中4次setState调用的表现之因此不一样，这里的逻辑判断起了关键做用。

参考连接
参考连接react

• 连续调用了屡次setState，可是只引起了一次更新生命周期，由于React会将多个this.setState产生的修改放在一个队列里，缓一缓，攒在一块儿，以为差很少了在引起一次更新过程。

因此攒的过程当中若是你不停的set同一个state的值，只会触发最后一次，例如上面那道题数组

• 那么问题又来了：我就想让第三次输出为3，别给我覆盖掉该怎么办？

其实setState还有一个用法，它不止能够接受对象做为参数，还能够接受函数。异步

3.函数式的setState的用法

直接看代码：函数

componentDidMount(){
    SynapseAnalytics.init({type:Enum.pageTypeEnum.otherPage});
    this.setState(this.fn.bind(this));
    //第一次输出
    console.log(this.state.val);
    this.setState(this.fn.bind(this));
    //第二次输出
    console.log(this.state.val);
    setTimeout(()=>{
        this.setState({val:this.state.val+1});
        //第三次输出
        console.log(this.state.val);
        this.setState({
            val:this.state.val+1
        });
        //第四次输出
        console.log(this.state.val);
    },0);
}
fn(state,props){
    return{
        val:state.val+1
    }
}

• 这个函数能够接受两个参数，一个是当前state的值，一个是当前props，这个函数返回一个对象表明对state的修改。

我理解这个state其实就至关于一个全局变量，每次累加的不是this.state，而是state这个变量，因此不管累加多少次，最后将state这个变量赋值给this.state。

注意：在这累加的过程当中，若你在函数式的setState方法后面又穿插使用了传统的对象式（this.setState({val:this.state.val + 1})）的话，以前累加的就全白费了,由于上面说过了this.state.val仍是0，它只有在render以后才会改变。this