用 useEffect 钩住 useState

Question

我遇到了这种行为。 两个 onChange 被依次调用。 其中之一将数据保存到状态，并使用先前的状态生成新的状态。

const onChange = (data) => {
    setState1((prev) => {
      console.log("onChange set state");
      return [...prev, data];
    });
  };

另一个只是向控制台打印一些东西。

const onChange2 = (data) => {
    console.log("onChange2");
  };

单击按钮后调用 onChange 和 onChange2

<button
        onClick={() => {
          onChange({ foo: "bar" });
          onChange2();
        }}
      >
        2
      </button>

useEffect - 将数据保存到状态

const [state, setState] = useState(0);
  const [state1, setState1] = useState([]);

  useEffect(() => {
    setState((prev) => {
      console.log("use effect set state");
      return prev + 1;
    });
  }, []);

所以，如果你不使用 useEffect（注释掉），控制台日志，在第一个 onChange 将首先被调用，然后从第二个 onChange 调用控制台日志

如果取消注释 useEffect，则控制台将首先从 onChange2 登录，然后从 onChange 登录

为什么会这样，谁能说清楚？

CodeSandBox： https ://codesandbox.io/s/eager-hooks-sczvb

Answer 1

onChange和onChange2的调用顺序似乎发生了变化，因为onChange的console.log位于传递给setState1的回调中。

如果您直接在onChange移动console.log ，您将看到使用或不使用useEffect的顺序是相同的。

const onChange = (data) => {
  console.log("onChange set state");
  setState1((prev) => {
    return [...prev, data];
  });
};

重要的是要了解，当您调用setState ，不能保证状态会立即更改，由 React 决定何时应用新状态并触发新渲染。

这就是为什么传递给 setState 的回调应该只返回一个新状态而不运行任何效果（例如console.log ），因为此代码运行的那一刻被考虑在实现细节中，并且可能会随着任何版本的 React 发生变化。

Answer 2

预期行为首先调用onChange2 ，然后调用onChange set state无论 useEffect 主体被注释。 因为onChange2现在调用了。 但是在渲染后调用的 setState fn 中的onChange set state 。

看起来的“错误”是为什么第一次单击时首先调用onChange set state 。 嗯...找到反应计算过期纤维。 setState 回调根据不同的条件执行同步或异步。 很难读。