react 组件生命周期

相关函数

• getDefaultProps 设置默认props,只调用一次

• getInitialState 初始化每个实例的state

• componentWillMount 该方法在首次渲染之前调用，也是再render方法调用之前修改 state 的最后一次机会

void componentWillMount() 

• render 组件渲染

• componentDidMount 不会在服务端被渲染的过程中调用，该方法被调用时，已经渲染出真实的 DOM

void componentDidMount()  

• componentWillReceiveProps 组件的 props 属性可以通过父组件更改，此时该方法将被调用。可以在这个方法里更新 state,以触发render方法重新渲染组件

void componentWillReceiveProps(nextProps)

• shouldComponentUpdate 如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回 false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用

void shouldComponentUpdate(nextProps, nextState) 

• componentWillUpdate 这个方法和 componentWillMount 类似，在组件接收到了新的 props 或者 state 即将进行重新渲染前，此方法会被调用，注意不要在此方法里再去更新 props 或者 state

void componentWillUpdate(nextProps, nextState)

• componentDidUpdate 这个方法和 componentDidMount 类似，在组件重新被渲染之后会被调用，可以在这里访问并修改 DOM。除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate

void componentDidUpdate()

• componentWillUnmount 每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器

void componentWillUnmount()

几种调用顺序实例

当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount(不会在服务端被渲染的过程中调用)

每次修改 state，都会重新渲染组件，实例化后通过 state 更新组件，会依次调用下列方法:

1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate

当再次装载组件时，以下方法会被依次调用：

1、getInitialState
2、componentWillMount
3、render
4、componentDidMount

图解

1.png 2.png

参考来源：有可运行的实例