getDerivedStateFromProps和getSnapshotBeforeUpdate

祥哥的说

于 2023-03-05 14:21:23 发布

阅读量1.6k

点赞数

分类专栏： React 文章标签： react.js javascript react native

本文链接：https://blog.csdn.net/qq_39207948/article/details/129345562

版权

React 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了React的两个重要生命周期方法：getDerivedStateFromProps用于在props变化时更新state，getSnapshotBeforeUpdate则用于在更新前捕获信息。文章详细阐述了这两个方法的使用场景、注意事项，并提供了如何在ReactHooks中模拟它们功能的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

getDerivedStateFromProps 和 getSnapshotBeforeUpdate 都是 React 中的生命周期方法，用于在组件渲染过程中进行状态管理和数据处理。

`1、getDerivedStateFromProps`

getDerivedStateFromProps 方法是 React 16.3 新增的生命周期方法，用于在 props 发生变化时更新组件的 state。该方法接收两个参数：props 和 state，返回一个对象用于更新组件的 state。这个方法的主要作用是在组件挂载时和更新时都会被调用，允许组件在不同的状态下更新自己的 state。

需要注意的是，使用 getDerivedStateFromProps 方法更新 state 只有在以下情况下才是必要的：

组件的 props 可能会导致组件的 state 发生变化；
组件的 state 需要根据 props 动态地计算得出。

如果上述两种情况都不满足，就没有必要使用 getDerivedStateFromProps 方法来更新组件的 state。在大多数情况下，应该优先考虑使用 props 直接渲染组件。

可以通过 getDerivedStateFromProps 方法返回一个对象，该对象的属性将与当前的 state 进行浅合并，从而实现对 state 的更新。例如，下面的示例中，getDerivedStateFromProps 方法返回一个新的 counter 值，这个值会与原有的 state 进行浅合并：

class Example extends React.Component {
  state = {
    counter: 0
  };

  static getDerivedStateFromProps(props, state) {
    return {
      counter: props.counter
    };
  }

  render() {
    return (
      <div>
        <p>Counter: {this.state.counter}</p>
      </div>
    );
  }
}

在这个示例中，每当 props.counter 发生变化时，getDerivedStateFromProps 将返回一个包含新的 counter 值的对象，React 会将其与当前的 state 进行浅合并，从而更新组件的状态。

在使用 React Hooks 时，可以通过 useState 和 useEffect 模拟 getDerivedStateFromProps 的功能。具体做法是在组件中使用 useState 来定义一个状态变量，并在 useEffect 中监听 props 的变化来更新状态变量。

以下是一个简单的示例代码：

import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  const [state, setState] = useState({});

  useEffect(() => {
    setState(props);
  }, [props]);

  return (
    <div>
      ...
    </div>
  );
}

`2、getSnapshotBeforeUpdate`

getSnapshotBeforeUpdate 方法也是 React 的生命周期方法，用于在组件更新之前捕获一些信息（例如组件更新前的滚动位置）以便在更新后使用。该方法接收两个参数：prevProps 和 prevState，返回一个任意类型的值，这个值会被传递到 componentDidUpdate 中的第三个参数 snapshot 中。

在使用 React Hooks 时，可以通过 useRef 和 useEffect 模拟 getSnapshotBeforeUpdate 的功能。具体做法是在组件中使用 useRef 定义一个引用变量，并在 useEffect 中保存需要捕获的信息到引用变量中。

import React, { useRef, useEffect } from 'react';

function MyComponent(props) {
  const ref = useRef(null);

  useEffect(() => {
    const snapshot = ref.current.scrollTop;
    // do something with the snapshot
  });

  return (
    <div ref={ref}>
      ...
    </div>
  );
}

需要注意的是，使用 Hooks 模拟类组件的生命周期时，需要注意在 useEffect 中正确处理依赖项，以免出现无限循环的情况。同时，Hooks 的执行顺序也可能会有所不同，需要仔细测试和调试。

3、getDerivedStateFromProps和componentWillReceiveProps的区别

执行时机不同：getDerivedStateFromProps 是在 props 更新时调用，并在 render 方法之前执行，而 componentWillReceiveProps 是在组件接收到新的 props 之后调用，但在 render 方法之前。
返回值不同：getDerivedStateFromProps 必须返回一个对象，用于更新 state，而 componentWillReceiveProps 则没有返回值。
是否可获取组件实例：由于 getDerivedStateFromProps 是在 render 方法之前调用的，所以它不能访问组件实例（this），因此它必须是一个静态方法。而 componentWillReceiveProps 则可以访问组件实例。

4、componentWillReceiveProps引入的问题有哪些

componentWillReceiveProps 生命周期方法会在 props 更新后被调用，可以在该方法中根据新的 props 更新组件的状态。但是，它存在以下两个问题：

在该方法中更新状态容易导致死循环。因为每次更新状态后，React 会重新渲染组件，而重新渲染又会触发 componentWillReceiveProps，这样就会不停地循环调用该方法，导致页面卡死。
在 React Fiber 引入后，React 开始支持异步渲染，componentWillReceiveProps 的调用时机会变得不确定。因为在异步渲染中，React 可能会将多个 setState 批量执行，这样 componentWillReceiveProps 就无法得到 props 的最新值。