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

这只是钩住useState的功能组件！

Answer 1

这是由于React.StrictMode而引起的，这仅在开发中发生。如果删除React.StrictMode，您将仅获得1条日志。

有关更多详细信息，请在react repo上检查此线程：

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

希望这会有所帮助！

为什么useState使组件呈现两次？

1 个答案: