为什么 React 中的 setState Hook 即使不改变状态也会渲染两次？

Question

我正在研究 React hooks 并在代码中插入一些控制台日志，以更好地理解渲染流程。然后我开始模拟发送相同值的 setState 效果，看看 React 是否会再次渲染它。

import { useState } from "react";

function ManComponent() {
  /* States */
  const [shirt, setShirt] = useState("Blue Shirt");
  console.log("Rendering man with "+shirt);
  
  /* Actions */
  const changeShirt = (newShirt) => {
    console.log("[Man] Changing shirt from "+shirt+" to "+newShirt);
    setShirt(newShirt);
  };
  
  
  return (
    <div>
      <p>The man is using: {shirt}</p>
      
      <div>
        <button onClick={() => changeShirt("Red Shirt")}>Change to red shirt</button>
        <button onClick={() => changeShirt("Blue Shirt")}>Change to blue shirt</button>
      </div>
    </div>
  );
}

export default function App() {
  console.log("Rendering app");

  return (
    <ManComponent />
  );
}

如果我单击“更改为红色衬衫”三次，我会收到两条日志，表明该组件正在渲染。它应该只是一个，因为我只改变了一次值，对吧？

我的问题是理解为什么如果状态只改变一次，组件会渲染两次。

PS：我尝试去掉严格模式，没有效果。顺便说一句，我正在使用 React 17 版本。

Answer 1

发生了什么

\n

React 文档在useStatehook API中准确地解决了这种行为。

\n

\n

摆脱状态更新

\n

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

\n

请注意，React 可能仍需要在退出之前再次渲染该特定组件。这不应该成为一个问题，因为 React 不会不必要地将 \xe2\x80\x9cdeeper\xe2\x80\x9d 放入树中。

\n

\n\n

这不是严格模式

\n

严格模式是一个很好的猜测，因为它过去常常在 React 17 之前的渲染周期中触发重复日志，尽管它已更新为静默这些重复日志以避免混淆。

\n

\n

从 React 17 开始，React 自动修改控制台方法，例如console.log()在第二次调用生命周期函数时静默日志。但是，在某些可以使用解决方法的情况下，它可能会导致不良行为。

\n

\n

...这引起了额外的混乱，导致严格模式日志记录行为的另一次更新（我相信尚未发布）。

\n

上面引用中提到的使用日志调试严格模式渲染的解决方法是保留日志函数的模块范围副本。

\n

const log = console.log;\n\nconst App = () => {\n  log(\'Will not be silenced by React\');\n  return //...\n};\n

\n