React的生命周期

  • 生命周期是一个抽象的概念,分成了很多个阶段:
    \triangleright 1.比如装载阶段(Mount),组件第一次在DOM树中被渲染的过程;
    \triangleright 2.比如更新过程(Update),组件状态发生变化,重新更新渲染的过程;
    \triangleright 3.比如卸载过程(Unmount),组件从DOM树中被移除的过程;

  • React内部为了告诉我们当前处于哪些阶段,会对我们组件内部实现的某些函数进行回调,这些函数就是生命周期函数:
    \triangleright 1.比如实现componentDidMount函数:组件已经挂载到DOM上时,就会回调;
    \triangleright 2.比如实现componentDidUpdate函数:组件已经发生了更新时,就会回调;
    \triangleright 3.比如实现componentWillUnmount函数:组件即将被移除时,就会回调;
    (注意:函数式组件是没有生命周期函数的)

React的生命周期图谱
  • componentDidMount中的操作

componentDidMount()会在组件挂载后(插入DOM树中)立即调用。
\triangleright 1.依赖于DOM的操作;
\triangleright 2.发送网络请求;(官方建议)
\triangleright 3.添加一些订阅;(会在componentWillUnmount取消订阅);

  • componentDidUpdate中的操作

componentDidUpdate()会在更新后被立即调用,首次渲染不会执行此方法。
\triangleright 1.当组件更新后,可以在此处对DOM进行操作;
\triangleright 2.如果你对更新前后的props进行了比较,也可以选择在此处进行网络请求;

  • componentWillUnmount

componentWillUnmount()会在组件卸载及销毁之前直接调用。
\triangleright 1.在此方法中执行必要的清理操作;
\triangleright 2.清除timer,取消网络请求或清除在componentDidMount()创建的订阅等;

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

推荐阅读更多精彩内容