React 组件的生命周期概念图
装载组件触发
-
componentWillMount
在首次渲染之前,** render 之前调用**
componentDidMount
该方法被调用时,已经渲染出真实的 DOM,在render 之后调用
更新组件触发
componentWillReceiveProps
接收到新的props调用,shouldComponentUpdate
接收到新的props或state,要渲染前调用,通过返回 false 来阻止组件的重新渲染componentWillUpdate
接收到新的props或state前立即调用componentDidUpdate
组件更新之后操作DOM
在组件重新被渲染之后,componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM
卸载组件触发
- componentWillUnmount
组件从DOM中移除时被立即调用,完成所有的清理和销毁工作,在 componentDidMount 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。
参考
https://segmentfault.com/a/1190000004168886#articleHeader3