React新生命周期--getDerivedStateFromProps

getDerivedStateFromProps 是 React 组件类的一个静态方法，它在组件被装载和更新时调用。它应该返回一个对象来更新状态，或者返回 null 表示不需要更新。

这个方法的主要目的是用于 state 的依赖于 props 而且不是 state 的直接变体。例如，你可能想要保存最后一个 prop 的值作为一个未维护的状态。

解决方案：

class MyComponent extends React.Component {
  // 初始化state
  constructor(props) {
    super(props);
    this.state = {
      value: props.value
    };
  }
 
  // 使用静态方法
  static getDerivedStateFromProps(props, state) {
    // 当 prop 的 value 改变且和 state 的 value 不一致时，更新 state
    if (props.value !== state.value) {
      return { value: props.value };
    }
    // 如果没有变化，返回 null 表示不更新 state
    return null;
  }
 
  render() {
    return (
      <div>
        {this.state.value}
      </div>
    );
  }
}

在这个例子中，每次 value prop 改变，并且和当前的 state 不一致时，getDerivedStateFromProps 会更新组件的 state，导致重新渲染。

注意：这个方法是从类组件中派生状态，如果你在使用函数组件，你应该使用 useEffect 钩子来代替。