React生命周期

216 阅读2分钟

生命周期整体流程:

1、实例化

getDefaultProps 取得默认属性

getInitialState 初始化状态

componentWillMount 即将进入dom

render 描画dom

componentDidMount 已经进入dom

2、具体的声明函数周期---运行中阶段 数据更新过程

运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

1、组件将要接受新值componentWillReceiveProps(已加载组件收到新的参数时调用)

2、组件是否更新 shouldComponentUpdate (影响整个项目的性能,决定视图的更新)

3、组件即将更新 componentWillUpdate

4、必不可少的render

5、组件更新完毕时运行的函数 componentDidUpdate

3、销毁时 componentWillUnmount

卸载组件

ReactDOM.unmountComponentAtNode(‘节点’)

新增的React组件(加粗的为其中比较重要的)

constructor

1: 用于初始化操作,一般很少使用

2:唯一一个直接修改state的地方,其他地方通过调用this.setState()方法。

static getDerivedStateFromProps

1:当state需要从props初始化时,使用

2:尽量不使用,维护俩者状态需要消耗额外资源,增加复杂度

3:每次render都会调用

4:典型场景表单获取默认值

componentDidMount

1:UI渲染完成后调用

2:只执行一次

3:典型场景:获取外部资源

componentWillUnmount

1:组件被移除时调用

2:典型场景:资源释放

getSnapshotBeforeUpdate

1:在render之前调用,state已更新

2:典型场景:获取render之前的dom状态

componentDidUpdate

1:每次UI更新被调用

2:典型场景:页面通过props重新获取数据

shouldComponentUpdate

1:觉得Vistual Dom是否重绘

2:一般可以由PuerComponent自动实现

3:典型场景:性能优化

static getDerivedStateFromProps(nextProps,prevState){

console.log(nextProps)

}

这个生命周期函数是为了替代componentWillReceiveProps存在的,所以在你需要使用componentWillReceiveProps的时候,就可以考虑使用getDerivedStateFromProps来进行替代了。

两者的参数是不相同的,而getDerivedStateFromProps是一个静态函数,也就是这个函数不能通过this访问到class的属性,也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断,根据新传入的props来映射到state。