是否存在強制使用 getDerivedStateFromProps 的場景？

Question

正如 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 合適？

Answer 1

但是我們不能只清除 componentDidUpdate 中的陳舊數據嗎？ 即使它會在道具比較相等的情況下觸發不必要的重新渲染，但對於它的價值來說，這是一個可以接受的解決方案。

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

我會在現有內容旁邊使用加載指示器（通過更改狀態標志）重新渲染（在加載新內容之前不清除現有數據） - 如果內容被渲染為單獨的組件（通過相同的道具，“演示與容器組件”）重新渲染很便宜.

Answer 2

現在我確定 componentDidUpdate 肯定可以做到這一點。 缺點就是額外的不必要的渲染過程和你必須在 componentDidUpdate 中關心的結束條件，以免觸發無休止的渲染循環。 但是值得通過使用 getDerivedStateFromProps 來避免這種不必要的渲染。