我是否可以在使用效果钩子中设置状态

Question

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

在useEffect钩子中创建一个观察a并设置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>
  )
}

Answer 1

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

话虽如此，如果b可能会因为更改a以外的原因而发生更改，则最好以相同的效果执行这两个操作，在这种情况下，您也会希望执行相同的逻辑

Answer 2

为了将来的目的，这也可能有帮助：

在useffect中使用setState是可以的，您只需要像前面描述的那样注意不要创建循环。

但这不是唯一可能发生的问题。见下文：

想象一下，您有一个组件Comp，它从父组件接收props，并根据props的更改来设置Comp的状态。出于某种原因，您需要在不同的use效应中更改每个道具：

不要这样做

useEffect(() => {
  setState({ ...state, a: props.a });
}, [props.a]);

useEffect(() => {
  setState({ ...state, b: props.b });
}, [props.b]);

它可能永远不会改变a的状态，正如你在这个例子中看到的：https://codesandbox.io/s/confident-lederberg-dtx7w

在这个例子中发生这种情况的原因是因为当您更改prop. a和prop. b时，两个useAction都在同一个反应周期中运行，所以当您更改setState时，{... state}的值因为它们在相同的上下文中是完全相同的。当您运行第二个setState时，它将替换第一个setState。

改为这样做

这个问题的解决方案基本上是这样调用setState：

useEffect(() => {
  setState(state => ({ ...state, a: props.a }));
}, [props.a]);

useEffect(() => {
  setState(state => ({ ...state, b: props.b }));
}, [props.b]);

在这里查看解决方案：https://codesandbox.io/s/mutable-surf-nynlx

现在，当您继续执行setState时，您总是收到状态的最新和正确的值。

我希望这能帮助到某人！

Answer 3

一般来说，在useffect内部使用setState将创建一个无限循环，这很可能是您不想引起的。这条规则有几个例外，我将在后面讨论。

每次渲染后都会调用useffect，当在其中使用setState时，它将导致组件重新渲染，该组件将调用useffect，依此类推。

其中一个流行的情况，使用useState内部的use效应不会导致无限循环是当您传递一个空数组作为第二个参数到use效应像use效应（（）=