1.组件挂载图
- 了解生命周期函数的执行顺序
2.生命周期执行顺序
- 可以看到在组件在组件初始化时,只执行如下三个方法:
- 在父组件状态改变时,依次执行的生命周期函数是:
- 我试着分别在这几个生命周期函数中setState了一下,发现在componentWillUpdate、render、componentDidUpdate 中会报错,也就是说在componentWillUpdate、render、componentDidUpdate中不可以setState。
1.那么问题来了这些周期方法为什么不可以setState?
2.setState异步机制,怎么处理,setState(函数)?
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、2、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调用的表现之所以不同,这里的逻辑判断起了关键作用。
所以攒的过程中如果你不停的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其实就相当于一个全局变量,每次累加的不是this.state,而是state这个变量,所以无论累加多少次,最后将state这个变量赋值给this.state。
注意:在这累加的过程中,若你在函数式的setState方法后面又穿插使用了传统的对象式(this.setState({val:this.state.val + 1}))的话,之前累加的就全白费了,因为上面说过了this.state.val还是0,它只有在render之后才会改变。