Question

假设我有一些布尔值 useState 状态，并切换它。这会导致组件的主体重新执行，并按预期重新渲染组件。如果我再次更新状态但将其更新为相同的值，则组件不会重新渲染（如预期），但组件的主体确实会重新执行。如果我再一次将它更新为相同的值，它既不会重新渲染也不会重新执行。为什么它会在第二次更新时重新执行正文？

这是一个例子：

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

  console.log("rendering");

  return (
    <div className="App">
      <button
        onClick={() => { setState(true); }}
      >
        true
      </button>
      <button
        onClick={() => { setState(false); }}
      >
        false
      </button>
      <div>{`${state}`}</div>
    </div>
  );
}

如果您想自己尝试，这里有一个代码沙盒：https://codesandbox.io/s/purple-bird-is87c?file=/src/App.js

预期结果：点击 false 按钮三次导致“渲染”仅打印到控制台一次。实际结果：“rendering”两次打印到控制台。

在开发工具分析器中，我们看到的是两次提交，但在第二次提交中没有重新渲染。

将状态挂钩更新为相同的值会导致功能组件重新运行（但不会重新渲染），为什么？

0 个答案: