史上最全 React 生命周期详情分析

分手后的思念是犯贱 2022-05-09 12:54 335阅读 0赞

React 生命周期分为三种状态 ：

  1. 1、初始化
  2. 2、更新 
  3. 3、销毁 （卸载）

1、初始化：

  1. 1、getDefaultProps()
  3.    设置默认的props，也可以用dufaultProps设置组件的默认属性。
  5. 2、getInitialState()
  7.    在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props。
  9. 3、componentWillMount()
  11.    组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
  13. 4、render()
  15.    react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
  17. 5、componentDidMount()
  19.    组件渲染之后调用，只调用一次。

2、更新：

  1. 1、componentWillReceiveProps(nextProps)
  3.    组件初始化时不调用，组件接受新的props时调用。
  5. 2、shouldComponentUpdate(nextProps, nextState)
  7.    react性能优化非常重要的一环。
  8.    组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，
  9.    如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，
  10.    这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。
  12. 3、componentWillUpdata(nextProps, nextState)
  14.    组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state。
  16. 4、render()
  18.    组件渲染。
  20. 5、componentDidUpdate()
  22.    组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。

3、销毁 ：

  1. 1、componentWillUnmount()
  3.    组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

发表评论

表情：
评论列表 （有 0 条评论，335人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ByteBuddy（史上最全）

    ByteBuddy（史上最全） 文章很长，建议收藏起来慢慢读！ [总目录 博客园版][Link 1] 为大家准备了更多的好文章！！！！ 推荐：尼恩Java面试宝典（持

    小鱼儿小鱼儿/ 0 赞/ 293 阅读

    相关 react生命周期

    前言 学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始

    傷城~傷城~/ 0 赞/ 443 阅读