React 组件的生命周期

React 组件的生命周期概念图

react组件的生命周期.jpg

装载组件触发

  • 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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容