学习笔记：React生命周期

唱唱鸽
103 阅读2分钟

React生命周期（旧）—— React17以前

image.png

  1. 初始化阶段：
    • 触发方式
      1. 由ReactDOM.render()触发---初次渲染
    • 生命周期钩子函数
      1. constructor()
      2. componentWillMount()
      3. render() --- 一直在使用
      4. componentDidMount() --- 常用：开启定时器、发送网络请求、订阅消息等
  2. 更新阶段:
    • 触发方式
      1. 由父组件更新传入当前组件（子组件）的props触发
      2. 由当前组件内部调用this.setState()触发
      3. 由当前组件内部调用this.forceUpdate()触发
    • 生命周期钩子函数
      1. componentWillReceiveProps()
      2. shouldComponentUpdate()
      3. componentWillUpdate()
      4. render() --- 一直在使用
      5. componentDidUpdate()
  3. 卸载阶段：
    • 触发方式
      1. 由ReactDOM.unmountComponentAtNode()触发
    • 生命周期钩子函数
      1. componentWillUnmount() --- 常用：清除定时器、取消订阅消息等

React生命周期（新）—— React17及以后

image.png

  1. 初始化阶段：
    • 触发方式
      1. 由ReactDOM.render()触发---初次渲染
    • 生命周期钩子函数
      1. constructor()
      2. getDerivedStateFromProps()--- 几乎不用
      3. render() --- 一直在使用
      4. componentDidMount() --- 常用：开启定时器、发送网络请求、订阅消息等
  2. 更新阶段:
    • 触发方式
      1. 由父组件更新传入当前组件（子组件）的props触发
      2. 由当前组件内部调用this.setState()触发
      3. 由当前组件内部调用this.forceUpdate()触发
    • 生命周期钩子函数
      1. getDerivedStateFromProps() --- 几乎不用
      2. shouldComponentUpdate()
      3. render() --- 一直在使用
      4. getSnapshotBeforeUpdate() --- 几乎不用
      5. componentDidUpdate()
  3. 卸载阶段：
    • 触发方式
      1. 由ReactDOM.unmountComponentAtNode()触发
    • 生命周期钩子函数
      1. componentWillUnmount() --- 常用：清除定时器、取消订阅消息等

总结

  • 新旧生命周期对比：

    • 废除了三个生命周期钩子
      • componentWillMount()
      • compoenntWillReceiveProps()
      • componentWillUpdate()
    • 废除了不是只完全删除，使用时会有警告，在17.x版本中，仍可以通过再加前缀 UNSAFE_xxx 来使用
      • UNSAFE并不是表示不安全
      • 是为了提醒开发人员误用这些生命周期钩子可能会在后续的版本中出现意料之外的bug
    • 新增了两个生命周期钩子
      • getDerivedStateFromProps() 在挂载阶段和更新阶段都会调用
      • getSnapshotBeforeUpdate() 在更新阶段处于render与componentDidUpdate之间

  • getDerivedStateFromProps

    • 使用场景：当组件状态完全取决于props时可以使用
    • 注意：
      • 开发中使用极其罕见，是类原型上的方法，使用时需要加上static关键字
      • 函数的参数为传输过来的props，必须要有返回值，返回值是状态对象

  • getSnapshotBeforeUpdate

    • 使用场景：在一些需要截取页面即将更新前的previous数据，并做一些特殊操作的UI组件中使用
    • 注意：
      • 开发中使用极其罕见，函数的参数为previousState和previousProps，在该函数中可以同时持有previous和current数据，进行一些特殊操作
      • 返回值，会作为componentDidUpdate函数的第三个参数
avatar
文章
阅读
粉丝