React Components 的生命周期笔记

在浏览器中的三个状态

  1. Mounted
  2. Update
  3. Unmounted

Mounted 状态

React Components 被 render 解析生成对应的 DOM 节点,并且插入浏览器的真实 DOM 树的过程

当页面渲染出来,人眼看到的时候,Mounted 已经结束。

hook 函数 – 按从上往下顺序执行

  • getInitialState()
    • 初始化 React Components 的 state
  • getDefaultProps()
    • 初始化 React Components 的 props
  • componentWillMount()
    • render 函数调用前调用
    • 在 mounted 之前调用
  • componentDidMount()
    • render 函数调用后调用
    • 在 mounted 之后调用

Update 状态

React Components 被重新 render 解析的过程

当前 DOM 结构不一定改变,React Components 会把当前和最近一次的 state 拿出来对比,如果 state 发生改变,并且影响了 DOM 结构的时候,才会改变 DOM 结构,这里有个坑,可以看看下面这篇文章:

知乎专栏 – 进击的 React – setState:这个API设计到底怎么样

hook 函数

  • componentWillReceiveProps()
    • 当一个 Mounted Components 将要接受新的 props 时,被调用。
    • 其函数参数就是新的 props 对象
  • shouldComponentUpdate()
    • 当一个 Mounted Components 已经接收到新的 props 对象和 state 之后被调用,判断是否有必要去更新 DOM 结构
    • 第一个参数是新的 props 对象
    • 第二个参数是新的 state 对象
    • 返回 TRUE 表示更新 DOM 结构
    • 返回 FALSE 表示跳过此次更新
  • componentWillUpdate()
    • render 函数前调用
  • componentDidUpdate()
    • render 函数后调用

Unmounted 状态

一个 mounted 的 React Components 对应的 DOM 节点被从 DOM 结构中移出的过程。

hook 函数

  • componentWillUnmount()
    • React Components 将被销毁时调用此函数,可用来做释放资源的工作,不过和浏览器的垃圾回收机制形成了功能冲突,所以通常是用浏览器的垃圾回收机制,而不会去写这个函数。

发布者

iamorz

前端技术群:263240563

发表评论

电子邮件地址不会被公开。 必填项已用*标注