1.生命周期概述:
React生命周期简单描述,大体上可分为以下4个阶段,初始阶段、挂载阶段、更新阶段和移除阶段。每个阶段都有对应的方法,这篇文章主要记录一下方法的执行过程,以及一些tips.
初始阶段:对应有两个方法getDefaultProps和getInitialState,分别返 回一个对象,用来设置初始化的属性和状态。
挂载阶段:主要有componentWillMount 和componnetDidMount方法。
更新阶段:主要有shouldComponentUpdate、componentWillUpdate、componentDidUpdate等。
移除阶段:componnetWillunmount和componentDidunmount方法。
2.方法的执行顺序;
在组件首次被实例化时(不考虑初始化属性和状态情况下),通过执行constructor -> componentWillmount -> render -> componentDidmount。当父组件this.setState后,执行shouldComponnetUpdate -> render 。
3.避免过度渲染,以下案例中父组件index.ios.js中有两个子组件Acomponnent和Bcomponent,父组件分别传给Acomponennt和Bcomponent属性A,B。通过点击事件,调用setState改变B的值,而为改变A的值,正常情况下A,B均会渲染,而在A中的shouldCompoentUpdate中设置A属性没变化时,返回false,来避免过度渲染。代码如下:
index.ios.js代码:
Acomponnet组件代码:
B组件代码:
TestsetStateFUN.js:
结果截图: