派生的 state 是否允許用於 React 並發模式？

Question

今天，如果需要，我們可以對getDerivedStateFromProps組件和state 更新在 React Hooks/函數組件的渲染階段使用 getDerivedStateFromProps 來創建派生的 state。

我對 React Hook 變體特別好奇：這在 React 並發模式下是否允許？

如果我使用StrictMode <React.StrictMode>...</React.StrictMode>包裝常見問題解答中的ScrollView組件，則不會出現警告。 但是，我還是有點胃口，這種模式在並發模式下可能會出現問題。

所以問題是：

關於 Hooks FAQ 鏈接，派生 state 在 React 並發模式下是否仍然可行？

---

例子：

function Comp( {someCond} ) {
  const [counter, setCounter] = useState(0);

  if (someCond) {
    // we are setting derived state directly in render (see FAQ).
    setCounter(prev => prev + 1);
    // <-- imagine, at this point React aborts this render (and restarts later)
    // Does it lead to inconsistencies?
  }

  // ... return some jsx
}

Answer 1

它是安全的，但是您只能更新此組件的 state，直到在渲染期間對其他組件沒有副作用。 在反應 16.13.0 中添加了一個警告。

反應 16.13.0 發行說明：

渲染期間某些更新的警告 React 組件不應該

在渲染過程中對其他組件造成副作用。

支持在渲染過程中調用 setState，但僅限於同一個組件。 如果您在渲染不同組件的過程中調用 setState，您現在將看到一個警告：

 Warning: Cannot update a component from inside the function body of a different component.