我可以在 useEffect 挂钩中设置状态吗

Question

假设我有一些依赖于其他状态的状态（例如，当 A 更改时，我希望 B 更改）。

创建一个观察 A 并在 useEffect 钩子内设置 B 的钩子是否合适？

效果是否会级联，当我单击按钮时，第一个效果会触发，导致 b 发生变化，导致第二个效果在下一次渲染之前触发？像这样构建代码是否有任何性能劣势？

let MyComponent = props => {
  let [a, setA] = useState(1)
  let [b, setB] = useState(2)
  useEffect(
    () => {
      if (/*some stuff is true*/) {
        setB(3)
      }
    },
    [a],
  )
  useEffect(
    () => {
      // do some stuff
    },
    [b],
  )

  return (
    <button
      onClick={() => {
        setA(5)
      }}
    >
      click me
    </button>
  )
}

原文由 Dan Ruswick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

即使您在一个效果内设置状态，效果也总是在渲染阶段完成后执行，另一个效果将读取更新的状态并仅在渲染阶段后对其进行操作。

话虽如此，最好以相同的效果采取两种行动，除非有可能 b 可能由于 changing a 以外的原因而改变，在这种情况下，您也希望执行相同的逻辑

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一般来说，在 --- 中使用 setState useEffect 将创建一个您很可能不想导致的无限循环。该规则有几个例外情况，我将在稍后讨论。

useEffect 在每次渲染后调用，当 setState 在其中使用时，它会导致组件重新渲染，这将调用 useEffect -2fe-540很快。

在 useState useEffect 不会导致无限循环的一种常见情况是，当您将空数组作为第二个参数传递给 useEffect ，例如 useEffect(() => {....}, []) 这意味着效果函数应该被调用一次：仅在第一次安装/渲染之后。当您在组件中获取数据并且希望将请求数据保存在组件的状态中时，这会被广泛使用。

原文由 Hossam Mourad 发布，翻译遵循 CC BY-SA 4.0 许可协议