javascript - 我可以在 useEffect Hook 内设置状态吗

Question

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

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

效果是否会级联，这样当我单击按钮时，第一个效果将触发，导致 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>
  )
}

Answer 1

一般来说，在 useEffect 中使用 setState 会创建一个您很可能不希望导致的无限循环。该规则有一些异常(exception)情况，我稍后会介绍。

useEffect 在每次渲染后调用，当在其中使用 setState 时，它将导致组件重新渲染，从而调用 useEffect等等等等。

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