react生命周期总结

最新推荐文章于 2025-03-12 09:00:20 发布

cczzhh123456

最新推荐文章于 2025-03-12 09:00:20 发布

阅读量208

点赞数

分类专栏： react 文章标签： react 生命周期将被弃用的生命周期方法新的生命周期方法生命周期总结

本文链接：https://blog.youkuaiyun.com/q1312882392/article/details/91877079

版权

react 专栏收录该内容

4 篇文章

订阅专栏

组件从被创建到被销毁的过程称为组件的生命周期。对于一个基本的react组件，可以将每个react组件的生命周期分为：初始化，挂载，更新，卸载四个阶段。

初始化阶段：
组件初始化阶段的方法有：
getDefaultProps(),
getInitialState().

挂载阶段：
这个阶段组件被创建，执行初始化，并挂载到DOM中，完成第一次渲染。依次调用的生命周期方法有：
(1) constructor,
(2) componentWillMount（未来将废弃）,
(3) render,
(4) componentDidMount

constructor
这是ES6class的构造方法，组件被创建时，会首先调用组件的构造方法。这个构造方法接收一个props参数，props是从父组件传入的属性对象，如果父组件中没有传入属性而组件自身定义了默认属性，那么这个props指向的就是组件的默认属性。必须在这个方法中首先调用super(props)才能保证props被传入组件中。constructor通常用于初始化组件的state以及绑定事件处理方法等工作。
componentWillMount（未来将废弃）
这个方法在组件被挂载到DOM前调用，且只会调用一次。在这个方法中调用this.setState不会引起组件的重新渲染。
render
这是定义组件时唯一必要的方法。在这个方法中，根据组件的props和state返回一个react元素，用于描述组件的UI。render并不负责组件的实际渲染工作，它只是返回一个UI描述，真正的渲染出页面DOM的工作由react自身负责。render是一个纯函数，在这个方法中不能执行任何有副作用的操作。
componentDidMount
在组件被挂载到DOM后调用，且只会被调用一次。这个时候已经可以获取到DOM结构，因此依赖DOM节点的操作可以放到这个方法中。这个方法通常还会用于向服务器请求数据。在这个方法中调用this.setState会引起组件的重新渲染。

更新阶段
组件被挂载到DOM后，组件的props或state可以引起组件的更新。props引起的组件更新，本质上是由渲染该组件的父组件引起的，也就是当父组件的render方法被调用时，组件会发生更新过程，这个时候，组件的props的值可能发生改变，也可能没有发生改变。因为父组件可以使用相同的对象或值为组件的props赋值。但是，无论props是否改变，父组件render方法每一次调用，都会导致组件更新。State引起的组件更新，是通过调用this.setState修改组件state来触发的。组件更新阶段依次调用的生命周期方法有：
(1) componentWillReceiveProps（未来将废弃）
(2)shouldComponentUpdate
(3)componentWillUpdate（未来将废弃）
(4)render
(5)componentDidUpdate

componentWillReceiveProps(nextProps)（未来将废弃）
这个方法只在props引起组件的更新过程中才会被调用，State引起组件更新并不会触发该方法的执行。方法的参数nextProps是父组件传递给当前组件的新的props。父组件render方法的调用并不能保证传递给子组件的props发生变化，也就是说nextProps的值可能和子组件当前的props的值相等，因此往往需要比较nextProps和this.props来决定是否执行props发生变化后的逻辑。
注意
（1）在componentWillReceiveProps中调用setState，只有在组件render及其之后的方法中，this.state指向的才是更新后的state。在render之前的方法shouldComponentUpdatem, componentWillUpdate中，this.state依然指向的是更新前的state。
（2）通过调用setState更新组件状态并不会触发componentWillReceiveProps的调用，否则可能会进入一个死循环。
shouldComponentUpdate(nextProps, nextState)
这个方法决定组件是否继续执行更新过程。当方法返回true时（默认返回值），组件会继续更新过程；当方法返回false时，组件的更新过程停止，后续的componentWillUpdate, render, componentDidUpdate也不会再被调用。一般通过比较nextProps, nextState和组件当前的props, state决定这个方法的返回结果。这个方法可以用来减少组件不必要的渲染，从而优化组件的性能。
componentWillUpdate(nextProps, nextState)（未来将废弃）
这个方法在组件render调用前执行，可以作为组件更新发生前执行某些工作的地方，一般也很少用到。
注意
shouldComponentUpdate和componentWillUpdate中都不能调用setState,否则会引起循环调用的问题，render永远无法被调用，组件也无法正常渲染。
componentDidUpdate(prevProps, prevState)
组件更新后被调用，可以作为操作更新后的DOM的地方。这个方法的两个参数prevProps, prevState代表组件更新前的prosp和state。

卸载阶段
componentWillUnMount
这个方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清除组件中使用的定时器，清除componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

注意：只有类组建才具有生命周期方法，函数组件是没有的。

即将更改的生命周期
一些传统组件生命周期会导致一些不安全的编码实践。他们是：
（1）componentWillMount
（2）componentWillReceiveProps
（3）componentWillUpdate

这些生命周期方法经常被误解和滥用;此外，我们预计他们的潜在滥用可能在异步渲染方面有更大的问题。因此，我们将在即将发布的版本中为这些生命周期添加一个“UNSAFE_”前缀。（这里，“不安全”不是指安全性，而是表示使用这些生命周期的代码将更有可能在未来的React版本中存在缺陷，特别是一旦启用了异步渲染）。

React遵循语义版本控制, 所以这种改变将是渐进的。我们目前的计划是：

16.3：为不安全生命周期引入别名UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps和UNSAFE_componentWillUpdate。（旧的生命周期名称和新的别名都可以在此版本中使用。）
未来的16.x版本：为componentWillMount，componentWillReceiveProps和componentWillUpdate启用弃用警告。（旧的生命周期名称和新的别名都可以在此版本中使用，但旧名称会记录DEV模式警告。）
17.0：删除componentWillMount，componentWillReceiveProps和componentWillUpdate。（从现在开始，只有新的“UNSAFE_”生命周期名称将起作用。）

生命周期别名
（1）UNSAFE_componentWillMount，
（2）UNSAFE_componentWillReceiveProps
（3）UNSAFE_componentWillUpdate。（旧的生命周期名称和新的别名都将受支持。）

两个新的生命周期
（1）getDerivedStateFromProps
（2）getSnapshotBeforeUpdate。

新的生命周期: getDerivedStateFromProps

class Example extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // ...
  }
}

新的静态getDerivedStateFromProps生命周期在组件实例化以及接收新props后调用。它可以返回一个对象来更新state，或者返回null来表示新的props不需要任何state更新。与componentDidUpdate一起，这个新的生命周期应该覆盖传统componentWillReceiveProps的所有用例。

新的生命周期: getSnapshotBeforeUpdate

class Example extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
  }
}

新的getSnapshotBeforeUpdate生命周期在更新之前被调用（例如，在DOM被更新之前）。此生命周期的返回值将作为第三个参数传递给componentDidUpdate。（这个生命周期不是经常需要的，但可以用于在恢复期间手动保存滚动位置的情况。）与componentDidUpdate一起，这个新的生命周期将覆盖旧版componentWillUpdate的所有用例。

参考：
react官网
 https://segmentfault.com/a/1190000014456811?utm_source=channel-hottest