小编Vam*_*iro的帖子

我有以下代码（CodeSandbox）：

function App() {
  const [blah, setBlah] = useState(true);
  console.log('BLAH', blah);
  setBlah(true);

  return <button onClick={() => setBlah(true)}>Blah</button>;
}

据我所知，setBlah(true)组件的顶层导致了太多的重新渲染。我不明白的是，如果您注释掉顶层setBlah(true)并开始混合“Blah”按钮，为什么该组件不会重新渲染？两者都一遍又一遍地将 的状态设置blah为 true，但只有顶层setBlah(true)会导致重新渲染。

来自React 文档关于退出状态更新：“请注意，React 可能仍需要在退出之前再次渲染该特定组件。” 这里的关键词是“可能”，对我来说这意味着根据文档我的情况是有效的。所以问题可能会变成，在什么条件下setState，使用已设置的相同值调用 会导致重新渲染？了解这一点很有用，因为人们可能希望在setState方法前面放置逻辑来检查该值是否与当前值相同，以免导致错误的重新渲染。