前端

这篇笔记记录了React生命周期（旧）的知识

一、本堂课重点内容

  • React生命周期（旧）

二、详细知识点介绍

1、React生命周期的引入

  • 假如现在有一个需求，要设计一个点击按钮后页面某元素透明度每200ms从1变为0的功能，其中关键的定时器代码不能直接放在类组件中
  • 这时考虑将定时器代码放到render()函数中，但是由于透明度不断变化导致状态更新从而引发了render()函数的重复调用，导致定时器函数也被无限次调用，就会陷入死循环
  • 一种解决办法是再增添一个按钮，绑定一个新的函数，在该函数体中使用定时器。但是这种方法必须由用户触发一次按钮事件后定时器才能开始正常运作
  • 我们希望能够在元素挂载完毕后立刻调用定时器，这时就需要使用componentDidMount()方法
  • 组件被卸载之后，设置的定时器未被停止，会引起报错。这时需要在组件将要被卸载的时候清除计时器，使用componentWillUnmount()方法
  • 这些函数有多种称谓
    • 生命周期回调函数
    • 生命周期钩子函数（在合适的时机把这些函数“钩”出去执行）
    • 生命周期函数
    • 生命周期钩子

2、生命周期（旧）的理解

  • 组件从创建到死亡它会经历一些特定的阶段。
  • React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
  • 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
  • 生命周期流程图 image.png

3、生命周期（旧）的三个阶段

  • 初始化阶段: 由ReactDOM.render()触发——初次渲染

    • constructor()
    • componentWillMount()
    • render()：必用
    • componentDidMount()：常用，一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

  • 更新阶段: 由组件内部this.setSate()或父组件重新render触发

    • componentWillReceiveProps()：父组件render时触发，第一次修改不调用该方法
    • shouldComponentUpdate()：控制组件更新的“阀门”，可以不写，写了必须返回true或false
    • componentWillUpdate()
    • render()
    • componentDidUpdate()

  • 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

    • componentWillUnmount()：常用，一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

三、实践练习例子

  • 已在上一节中列出

四、课后个人总结

  • 旧版本React生命周期的几个关键节点：初始化、渲染、更新、挂载、卸载

五、引用参考