javascript - 关于 getDerivedStateFromProps 的思考

Question

根据这篇关于 what's news in React 16.3 的帖子，在下一次更新中 componentWillReceiveProps 将有一个替代品，即 getDerivedStateFromProps(替代品只会在 17.0 中发生)。

有趣的是，这个全新的静态生命周期方法

is called both on initial mounting and on re-rendering of the component, so you can use it instead of creating state based on props in constructor.

我越来越糊涂了。那么从现在开始我是否需要拆分我的构造函数并将创建状态逻辑放到这个新函数中呢？我的意思是当你第一次创建组件时创建状态的逻辑和你从 API Prop 创建状态时的逻辑是不一样的。用一种方法把它们放在一起似乎不太理想。

还有一件事是，如果我选择从构造函数创建我的状态，这个新方法仍然会被调用。真是个 SCSS !

你怎么看？

Answer 1

假设我们有一个列表组件，它通过向 API 提供从其父级接收的一些参数来呈现一些列表项。

1. 首先我们将this.state.data变量初始化为[]。
2. 然后使用 Prop ，我们在 componentDidMount() 中执行 API 调用，将其分配给 this.state.data。
3. 现在，这些来自父级的参数可能会发生变化，因此您必须在componentWillReceiveProps 中重复该过程。

我认为这可能是 getDerivedStateFromProps 的目标。现在不需要从 props 更新状态两次，你只需要在函数中写一次:getDerivedStateFromProps。顾名思义，当必须从 props 派生状态时使用它。

注意事项:

您仍然需要在构造函数中设置初始状态。初始状态和从 props 派生状态的逻辑可能非常不同。例如，如果您没有将 data 变量初始化为 [] 并且您映射到 this.state.data 它将失败，因为API 还没有返回要在getDerivedStateFromProps 中设置的结果。

即使 getDerivedStateFromProps 不能使用 this，它的工作方式与 this.setState 相同。

也就是说，如果你返回

{
  data: response.data
}

它不会更新您在构造函数中设置的其他状态变量。您还可以选择返回 null 以表示没有更改。

来自:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      externalData: []
    }
  }
  componentWillMount() {
    asyncLoadData(this.props.someId).then(externalData =>
     this.setState({ externalData })
    );
  }
  componentWillReceiveProps() {
    asyncLoadData(this.props.someId).then(externalData =>
     this.setState({ externalData })
    );
  }
}

收件人:

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      externalData: []
    }
  }
  static deriveStateFromProps(props, state, prevProps) {
    if (prevProps === null || props.someValue !== prevProps.someValue) {
      return {
        derivedData: computeDerivedState(props)
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

注意:我只是从纯 React 的 Angular 注意到一个实例。

另请阅读 You Probably Don't Need Derived State来自 React 博客。