javascript - 为什么 useState 会让组件渲染两次？

Question

也许你们中的一些人可以让我睁开眼睛。

我不明白为什么在这段代码中:https://codesandbox.io/s/use-state-renders-twice-6r1xl组件App在安装并单击按钮时渲染两次(console.log被调用两次)

代码:

export default function App() {
  const [clicked, setClicked] = React.useState(false);
  const handleClick = () => setClicked(!clicked);
  console.log(clicked);
  return <button onClick={handleClick}>click</button>;
}

结果:

false
false
true
true

它只是一个 Hook useState的功能组件!

Answer 1

这是因为 React.StrictMode 的原因，这只发生在开发中。如果删除 React.StrictMode，您将仅获得 1 个日志。

有关更多详细信息，请查看 React 存储库上的此线程:

https://github.com/facebook/react/issues/15074

另请检查 React 文档:https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

在此处检查没有 StrictMode 的应用程序:https://codesandbox.io/s/use-state-renders-twice-3vroc

希望这有帮助!