Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

React组件的生命周期与顺序

发布于:  

每个组件的生命周期都可能会经历如下三个过程:

  • 装载过程(Mount),也就是组件第一次在DOM树中渲染的过程

  • 更新过程(Update),也就是组件被重新渲染的过程

  • 卸载过程(Unmount),组件从DOM中删除的过程。

  • 当首次挂载组件时,按顺序执行 getDefaultProps, getInitialState, componentWillMount, render, componentDidMount.

  • 当重新挂载组件时,此时按顺序执行 getInitialState, componentWillMount, render, componentDidMount, 并不执行getDefaultProps.

  • 当卸载组件时,执行 componentWillUnmount

  • 当再次渲染组件时,组件接受到更新状态,此时按顺序执行 componentWillReceiveProps(nextProps), shouldComponentUpdate(nextProps,nextState), componentWillUpdate(nextProps, nextState), render, componentDidUpdate(prevProps, prevState).

getDefaultProps,getInitialState只有在使用React.createClass方法创建组件时才会用到,我们在使用ES6语法创建时其实并不会用到。

ES6 周期顺序表

第一次渲染 第二次渲染 props 改变 state 改变 卸载
componentWillMount componentWillMount componentWillReceiveProps shouldComponentUpdate componentWillUnmount
render render shouldComponentUpdate componentWillUpdate
componentDidMount componentDidMount componentWillUpdate render
render
componentDidUpdate

ending ...

[//]: # (谢谢* 掘金-sturuby)

厚颜一下 ~^_^~

赏赐