为什么即使状态值相同，组件仍然重新渲染？

Question

我的代码片段如下，

import { useState } from "react";

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

  return (
    <>
      {console.log("rendered...", state)}
      <button onClick={() => setState(1)}> Change </button>
    </>
  );
}

export default App;

这是输出：

启动：渲染...0

第一次点击：渲染...1

第二次单击： 渲染...1

第三次点击：（无输出）

代码未在严格模式下运行。 为什么第二次点击时，即使提供了相同的值，组件仍然重新渲染，为什么第三次反应最终可以跳过重新渲染？

Answer 1

您可以在这里找到答案：https://github.com/facebook/react/issues/20817或在这里：https://legacy.reactjs.org/docs/hooks-reference.html#bailing-out-状态更新

如果将 State Hook 更新为与当前状态相同的值，React 将退出而不渲染子项或触发效果。 （React 使用 Object.is 比较算法。）

请注意，React 可能仍需要在退出之前再次渲染该特定组件。这不应该是一个问题，因为 React 不会不必要地“深入”树。如果您在渲染时进行昂贵的计算，您可以使用 useMemo 对其进行优化。

这就是为什么你的组件会再渲染 1 次并获得相同的结果