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

Question

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

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

效果是否会级联，从而在我单击按钮时会触发下一个效果，从而导致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

效果始终在渲染阶段完成后执行，即使您将setState放在一个效果中，另一个效果也将读取更新后的状态并仅在渲染阶段之后对其执行操作。

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