React 并发模式是否允许派生状态？答案

【问题标题】：Will derived state be allowed for React Concurrent Mode?React 并发模式是否允许派生状态？
【发布时间】：2020-08-09 19:59:56
【问题描述】：

今天，如果需要，我们可以将getDerivedStateFromProps 用于类组件，将state updates during render phase 用于 React Hooks/函数组件以创建派生状态。

我对 React Hook 变体特别好奇：这在 React 并发模式下是否允许？

如果我用StrictMode <React.StrictMode>...</React.StrictMode> 包装常见问题解答中的ScrollView 组件，则不会有任何警告。不过我还是有点胃口，这种模式在并发模式下可能会有问题。

所以问题是：

关于 Hooks 常见问题链接，在 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
}

【问题讨论】：

您好，为什么会有问题？请你能更好地表达一下是什么导致了你的轻微感觉吗？
在并发模式下，渲染可能会被中止并重新启动。我很好奇，如果这会导致问题，如果在这种情况下直接在渲染阶段更改状态。让我们假设，在我们设置状态之后重新启动渲染。这是一个有效的案例/ React 支持还是会导致不一致？
我认为函数调用阶段和渲染阶段是不同的（即使我们通常称它们为“渲染”），因此不会发生不一致
@NoriSte 谢谢，澄清一下：“函数调用阶段”是指调用useState 的设置器？我还添加了代码，所以每个人都可以谈论同一个例子。
谢谢！我的意思是“组件函数调用”，在你的例子中Comp????

标签： reactjs react-hooks react-state-management getderivedstatefromprops react-concurrent

【解决方案1】：

它是安全的，但是你只能更新这个组件的状态，直到你在渲染过程中对其他组件没有副作用。在 react 16.13.0 中添加了一个警告。

反应 16.13.0 release note:

渲染期间某些更新的警告 A React 组件不应该

在渲染过程中对其他组件造成副作用。

支持在渲染时调用 setState，但仅限于同一个零件。如果您在另一个渲染过程中调用 setState 组件，您现在将看到一个警告：
Warning: Cannot update a component from inside the function body of a different component.

【讨论】：

虽然我理解发行说明中的文字，但我仍然不确定在编写应用程序实现 useState 用于组件状态（和提升状态）和 redux 时的含义。当我尝试向我的商店发送旨在触发副作用的更新时，我不断收到此警告。我猜我必须将一些代码提取到笔中，但我肯定希望更好地描述我应该如何构建我的代码以防止出现此警告，如果有人可以提供帮助的话？例如，我如何知道另一个组件是否正在渲染？