0

如 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？

4

2 回答 2

0

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

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

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

于 2020-01-17T12:03:35.180 回答
0

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

于 2021-02-04T16:12:08.237 回答