跳到主要内容

React生命周期

React 组件生命周期有哪些不同阶段​

React生命周期指组件从创建到销毁的整个生命周期过程，包括一系列方法和钩子函数，可以在每个阶段对组件进行控制和处理相应的逻辑。以下是React组件的生命周期的详细解释：

  1. Mounting（挂载阶段）：

在该阶段，React组件被创建并在DOM中进行渲染。以下是该阶段中被调用的各个方法：

  • constructor()：构造函数，在组件被创建时调用，用来进行一些初始化操作，如状态赋值、事件绑定等。
  • static getDerivedStateFromProps()：该函数会在组件挂载之前被调用，它有两个参数，props和state，它需要返回一个对象来更新状态，或者返回null来表示不需要更新。
  • render()：该函数是必须的，用于渲染组件并返回虚拟DOM。
  • componentDidMount()：组件挂载后立即调用该函数，适合进行一些异步操作。
  1. Updating（更新阶段）：

在该阶段，组件的状态或属性更新，触发重新渲染。以下是该阶段中被调用的各个方法：

  • static getDerivedStateFromProps()：在更新阶段也可以被调用，具体用法与挂载阶段相同。
  • shouldComponentUpdate()：该函数在组件更新之前被调用，返回true或false来控制是否继续更新，默认返回true。
  • render()：该函数会根据最新的状态或属性重新渲染组件，生成虚拟DOM。
  • componentDidUpdate()：组件更新后立即调用该函数，适合进行一些DOM操作或Ajax请求等异步任务。
  1. Unmounting（卸载阶段）：

在该阶段，组件从DOM中卸载并销毁。以下是该阶段中被调用的方法：

  • componentWillUnmount()：该函数会在组件即将卸载和销毁之前被调用，适合进行清理工作，如取消定时器、清除事件监听器等。

除了上述生命周期函数之外，还有一些钩子函数，如shouldComponentUpdate()、getSnapshotBeforeUpdate()等，它们可以在对应的阶段进行某些控制或处理。在React 17版本之后，React引入了新的生命周期函数getDerivedStateFromProps()，去替换原来的componentWillReceiveProps()钩子函数，并且不推荐使用componentWillMount()函数，因为该函数存在异步问题。

当组件的状态或属性发生变化时，React会按照以下顺序来调用更新阶段的生命周期函数：

  • static getDerivedStateFromProps() 在小于react16.3的时候只有­New props触发
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

另外，在某些情况下，组件的props或state变化不会触发更新阶段的所有生命周期方法，而是只会调用shouldComponentUpdate()、render()、getSnapshotBeforeUpdate()和componentDidUpdate()。在这种情况下，static getDerivedStateFromProps()方法将被跳过。

需要注意的是，组件在更新阶段的shouldComponentUpdate()生命周期函数中返回false，将阻止组件更新。之后的render()、getSnapshotBeforeUpdate()和componentDidUpdate()方法都将被跳过，因为没有任何东西需要更新。此时的状态和属性仍将保持不变。

总之，React生命周期函数的详细了解对于编写高效、可维护的React组件非常重要。理解React如何管理组件状态，并在某些生命周期函数中添加适当的逻辑和功能，可以在提高性能的同时使代码更容易理解和维护。

React中的componentDidCatch()生命周期方法允许在组件树中捕获和处理错误。它是一个很好的错误边界处理策略，为React应用程序提供了更健壮的错误处理和调试。

React生命周期函数中还有一个生命周期函数是UNSAFE_componentWillReceiveProps()，在React16版本之后被废弃。在之前的React版本中，该生命周期函数被用于在props更新后，根据新的props计算state的值。但是，由于它的使用被认为是不安全的，因此React官方在16版本之后将其废弃，并建议开发人员使用新的生命周期函数static getDerivedStateFromProps()来实现相同的功能。

Error Handling：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了 componentDidCatch 生命周期方法。

React 中的生命周期方法有哪些？​

  • componentWillMount:在渲染之前执行，用于根组件中的 App 级配置。
  • componentDidMount：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。
  • componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染
  • shouldComponentUpdate：确定是否更新组件。默认情况下，它返回true。如果确定在 state 或 props 更新后组件不需要在重新渲染，则可以返回false，这是一个提高性能的方法。
  • componentWillUpdate：在shouldComponentUpdate返回 true 确定要更新组件之前件之前执行。
  • componentDidUpdate：它主要用于更新DOM以响应props或state更改。
  • componentWillUnmount：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。

React 中的生命周期方法有哪些，它们分别在哪个时期触发？​

生命周期方法在 React 组件的不同时间点被调用，帮助我们控制组件的渲染和行为。以下是一些生命周期方法及其触发时间点：

componentDidMount: 组件第一次挂载到 DOM 时被调用 shouldComponentUpdate: 在更新组件之前被调用，用于确定是否应该更新组件 componentWillUnmount: 当组件从 DOM 中卸载时被调用 componentDidUpdate: 在组件更新之后被调用 getDerivedStateFromProps: 在组件状态从属性中学习变化时被调用