为什么useState使组件渲染两次？
也许你们中的一些人可以帮我睁开眼睛。
我不明白为什么在这段代码中：https://codesandbox.io/s/use-state-renders-twice-6r1xl组件应用程序在安装并单击按钮时呈现两次（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！
共有1个答案
这是因为React。StrictMode，这只发生在开发中。如果你移除了它，你会做出反应。StrictMode您将只获得1个日志。
有关更多详细信息，请查看react repo上的此线程：
https://github.com/facebook/react/issues/15074
还要检查以下文件：https://reactjs.org/docs/strict-mode.html#detecting-意外副作用
在此处检查不带StrictMode的应用程序：https://codesandbox.io/s/use-state-renders-twice-3vroc
希望这能有所帮助！
-
此组件渲染两次并抛出错误。我知道这个错误是因为它们在reduce函数中没有返回语句。但我不明白的是，为什么它会渲染两次？ 此外，当我删除代码时，它只呈现一次。据我所知，一个组件只能在四种情况下重新渲染 状态的变化 道具的变化 强制渲染 父母重新渲染。 在我的例子中，父组件没有重新渲染（我通过在父组件中使用console.log检查了它），并且这个组件是无状态的，没有道具被传递给它。有人能解释一下这
-
我遇到了这个简单的React函数组件，它渲染四次，而我希望它最初渲染一次，执行useffect更新状态，然后再次渲染。相反，控制台发送4个日志输出，表示它渲染了4次。了解react功能组件的基本生命周期的原因和资源吗？ https://codesandbox.io/s/solitary-tree-t120d?file=/src/App.js:149-191
-
我有一个组件，我设置了一个计数，让状态更新时，按钮点击。但是当我检查渲染时间时，每次我点击按钮它都会渲染两次。 https://codesandbox.io/s/brave-forest-yre6y?file=/src/App.js 我想知道： 为什么它是这样工作的
-
我已经初始化了一个数组状态，当我更新它时，我的组件不会重新渲染。以下是一个最低限度的概念证明： 根据这段代码，似乎输入应该包含要开始的数字0，并且无论何时更改，状态也应该更改。在输入中输入“02”后，应用程序组件不会重新渲染。但是，如果我在5秒后执行的onChange函数中添加setTimeout，则表明数字确实已更新。 对为什么组件不更新有什么想法吗？ 这是一个带有概念证明的代码沙盒。
-
我无法理解为什么我的AppReact组件呈现两次，如下面的gif所示。 我插入了一个控制台。在返回组件之前记录日志，查看组件渲染的次数。 每当我移除useState钩子时，我的应用程序只会呈现一次我认为应该呈现的效果。任何关于为什么会发生这种情况的指导都是受欢迎的
-
我有一个应用程序组件和测试组件 应用程序组件 测试组件：