React.js 静态 getDerivedStateFromProps()

在React中，组件的状态是一个非常重要的概念。通常情况下，我们可以使用 constructor() 方法来初始化组件的状态，但当父组件传入新的props时，我们需要及时更新组件的状态以反映这些变化。这就是 getDerivedStateFromProps() 方法的作用。

功能介绍

getDerivedStateFromProps() 是React16.3引入的新的生命周期方法。它的作用是在组件的props被更新之前被调用，它可以将props中的值映射到组件的state上。因此它的返回值将作为新的state。该方法必须是静态方法。

下面是该方法的函数签名:

static getDerivedStateFromProps(props, state);

• props: 组件接收到的props。
• state: 组件当前的state。

返回值: 新的state。

用法

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.count !== state.count) { // 只有在props变化时才更新state
      return {
        count: props.count
      }
    }
    return null;
  }

  constructor(props) {
    super(props);
    this.state = {
      count: props.count // 初始化状态
    }
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent count={0} />, document.getElementById('root'));

// 当父组件传入新的props时，MyComponent就会重新渲染，并基于新的props更新它的状态。

在上面的代码中，我们定义了一个 MyComponent 组件，并使用 getDerivedStateFromProps() 方法更新它的状态。当父组件传入新的 count props 时，我们会从这些 props 中推导出新的状态，并返回它。

static getDerivedStateFromProps(props, state) {
  if (props.count !== state.count) { // 只有在props变化时才更新state
    return {
      count: props.count
    }
  }
  return null;
}

我们使用 if (props.count !== state.count) 来保证只有在 count props 发生变化时才更新组件的状态。如果没有变化，我们就返回 null。

constructor(props) {
  super(props);
  this.state = {
    count: props.count // 初始化状态
  }
}

在构造函数中，我们通过将 props.count 赋值给 state.count 来初始化组件的状态。

注意事项

虽然 getDerivedStateFromProps() 看起来是一个非常强大的方法，但请注意它的使用限制：

• 在大多数情况下，你应该使用 shouldComponentUpdate() 或 componentDidUpdate() 来处理 props 的更新，而不是使用 getDerivedStateFromProps()。
• 该方法不应该执行任何有副作用的操作，例如网络请求或 DOM 操作。
• 在大多数情况下，你应该使用组件的生命周期方法（componentDidMount，componentDidUpdate等）来执行任何需要访问 DOM 的操作，而不是将数据从props映射到状态中。

总结

getDerivedStateFromProps() 是一个强大的生命周期方法，它可以让我们在组件的props被更新时及时地更新其状态，从而确保该组件始终反应最新的数据。但需要注意的是，该方法不应仅用于常规的组件更新，而应谨慎使用。