javascript - 为什么即使旧状态等于新状态，使用相同值调用 useState 的 setter 随后也会触发组件更新？

Question

仅当状态值由于先前的更新而实际更改时，才会出现此问题。
在下面的例子中，当第一次点击按钮时，“setState”被调用了一个新的值(12)，并且发生了组件更新，这是可以理解的。
当我第二次单击同一个按钮时，将状态设置为相同的值 12 会导致组件重新运行(重新渲染)，而为什么会发生这种情况是我的主要问题。
任何后续将 setStates 设置为相同的值 12 都不会触发组件更新，这也是可以理解的。 12 === 12 所以不需要更新。
那么，为什么在第二次单击按钮时会发生更新？

export default function App() {
  const [state, setState] = useState(0);

  console.log("Component updated");

  return (
    <div className="App">
      <h1>Hello CodeSandbox {state}</h1>
      <button onClick={() => setState(12)}>Button</button>
    </div>
  );
}

Codesandbox example

Answer 1

主要问题是，为什么登录函数组件体会导致 "Component updated" 的 3 个日志?
答案隐藏在 React docs 中的某处:

if you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects.

没有什么新东西，但是:

Note that React may still need to render that specific component again before bailing out. That shouldn’t be a concern because React won’t unnecessarily go “deeper” into the tree.

但请注意 useEffect接口(interface)定义:

will run after the render is committed to the screen.

如果您在 useEffect 中记录更改你只注意到两个 "B"按预期记录，这正是提到的救助行为的示例:

const App = () => {
  const [state, setState] = React.useState(0);

  useEffect(() => {
    console.log("B");
  });

  console.log("A");

  return (
    <>
      <h1>{state}</h1>
      <button onClick={() => setState(42)}>Click</button>
    </>
  );
};

App 将有额外的“救助”电话。组件(额外的 “A” 日志)， 但是 React 不会“更深入”，也不会改变现有的 JSX 或状态(不会记录额外的 "B")。