是否存在强制 getDerivedStateFromProps 的情况？答案

【问题标题】：Is there a scenario where getDerivedStateFromProps is mandatory?是否存在强制 getDerivedStateFromProps 的情况？
【发布时间】：2020-01-17 08:07:26
【问题描述】：

如 React 文档中所述，应谨慎使用此 API，因为可以使用更简单的替代方案来实现相同的结果。这是我理解并完全同意的。
但是，作为一个独立的 API，在某些情况下它应该是强制性的。令我困惑的是，即使是文档中提到的该 API 的“罕见用例”，也不能令人信服它是完全需要的。
以第二个用例为例：https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-props-change
此生命周期方法仅用于在渲染新道具之前清除陈旧数据。但是我们不能只清除componentDidUpdate中的陈旧数据吗？即使它会在道具比较相等的情况下触发不必要的重新渲染，但它是值得接受的解决方案。

 componentDidUpdate(prevProps, prevState) {
    if (prevProps.id !== this.props.id) {
      this.setState({ externalData: null });
      this._loadAsyncData(this.props.id);
    }
  }

我稍作修改以显示两种解决方案产生相同的最终结果：https://codesandbox.io/embed/sharp-paper-p5hv2?fontsize=14&hidenavigation=1&theme=dark

您认为在哪里适合使用此 API？

【问题讨论】：

标签： reactjs getderivedstatefromprops

【解决方案1】：

但是我们不能只清除 componentDidUpdate 中的陈旧数据吗？即使它会在道具比较相等的情况下触发不必要的重新渲染，但它是值得接受的解决方案。

如果渲染空内容是可以接受的，那么你就不需要它。

我将在现有内容旁边重新渲染加载指示器（通过更改状态标志）（在加载新内容之前不清除现有数据）-如果内容被渲染为单独的组件（通过相同的道具，“Presentational vs Container Components”）重新渲染很便宜。

【讨论】：

【解决方案2】：

现在我确信 componentDidUpdate 肯定可以解决问题。缺点就是额外的不必要的渲染通道和您必须在 componentDidUpdate 中关心的结束条件，以免触发无限的渲染循环。但值得通过使用 getDerivedStateFromProps 来避免这种不必要的渲染。

【讨论】：