在做项目的过程中发现使用好react的生命周期非常重要,小小的总结一下。

1,Constructor函数
在创建组件的时候调用一次
如果不显示声明constructor类会有默认的constructor(){}; 如果声明构造函数必须加上super, 因为super指代父类的实例,子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象
什么时候需要添加props参数呢?取决于你是否要在constructor中使用this.props, 是则constructor(props){super(props);...}否则constructor(){super()}
2,componentWillMount()
挂载到真实的DOM之前执行一次,如果在这个函数里面调用setState,本次的render函数可以看到更新后的state,但是只渲染一次.
即 下图在render里输出this.state.mm值为22222

3,componentDidMount()
挂载到真实的DOM之后执行一次, setState可以引发render渲染,此时子组建的didMount也执行完毕
网上说发送请求最好在didMount里面,是因为didMount的时候组件已经挂载到DOM树了,可以获取任何渲染出来的DOM元素,并且在didMount里setState的时候是会引发render重新渲染的,我之前项目里在willMount里发送请求也是可以的,当需要有数据才能渲染的时候就需要在willMount里面发送请求获取数据,可以获取的数据setState,然后render时就有了初始值,再在需要渲染的地方重新setState。

4,componentWillReceiveProps(nextProps)
当props发生变化时执行,初始化render时不执行,可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用
但是props不发生变化它也可能会执行,因为它在第一次render是不会调用的,但在之后的每一次父组建render都会调用,所以需要手动在此比较this.props和nextProps是否相同,再决定是否更新state

5,shouldComponentUpdate(nextProps, nextState)
组件挂载之后,每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true,都需要重新render,可以在setState不需要render时手动返回false,优化渲染的效率。
this.state 直接赋值(this.state.test = 'aaa')也不会引发页面渲染,但会改变state的状态值,最好不要直接赋值

6,componentWillUpdate(nextProps, nextState)
组件接受新属性或状态重新渲染之前会调用,shouldComponentUpdate返回true或者调用forceUpdate之后,componentWillUpdate也会被调用

7,componentDidUpdate()
只有第一次render结束的时候调用didMount,其他render结束的时候都调用componentDidUpdate

8,componentWillUnmount()
组件被卸载的时候会调用,可以在这里删除之前注册的事件等

另外:父组件didMount之前子组件已经完成组件挂载所有生命周期,父组件didUpdate之前子组件已经完成更新的所有生命周期,下图以Son开头的为子组件生命周期输出,

 

 

父组件在didMount里面setState之后         

                 

终于敲完了。。。。。

posted on 2018-08-30 16:40  mikoLiu  阅读(224)  评论(0编辑  收藏  举报