javascript - 在 React Hooks 中切换 bool 状态

Question

当我运行以下代码并单击按钮时，我成功触发了 useEffect 函数:

const { useState, useEffect } = React;

const Example = () => {
  const [bool, setBool] = useState(false);

  useEffect(() => {
    console.log(bool);
  }, [bool]);

  return (
    <button
      type='button'
      onClick={() => {
        setBool(!bool);
        setBool(!bool);
      }}
    >
      Check
    </button>
  );
};

ReactDOM.render(
  <Example />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

但是，当我写时:

const { useState, useEffect } = React;

const Example = () => {
  const [bool, setBool] = useState(false);

  useEffect(() => {
    console.log(bool);
  }, [bool]);

  return (
    <button
      type='button'
      onClick={() => {
        setBool(true);
        setBool(false);
      }}
    >
      Check
    </button>
  );
};

ReactDOM.render(
  <Example />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

据我了解，useEffect 函数不会被触发，因为 setBool 是异步的，并且 React 会合并这些更改，因此最终状态不会更改(bool 仍然为 false)。

我的问题是，为什么 React 在我出现的 !bool 和 !bool 的情况下无法检测到它。

谢谢

Answer 1

在第一种情况下，您将获取 bool 的当前值(无论该值是什么)并在将其设置为状态之前对其取反。结果，状态发生改变，因此 useEffect 被触发。

在第二种情况下，您提供一个硬编码值。如果 bool 的值已经是 false，则 setBool(false) 不会对状态产生任何影响；因此，useEffect 将不会被触发。