useState（）执行双重渲染
我在函数组件中使用useState（），第一个渲染调用两次。这是正确的还是错误的？如果正确，为什么渲染两次？setCount也会渲染组件两次。
function Example() {
const [count, setCount] = useState(0);
console.log("render");
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById('uu5'));
谢啦
共有3个答案
移除
问题出在React开发工具中。当控制台关闭时，组件只渲染一次。但是，如果打开React DevTools并重新加载页面，render将显示两次。打开示例并尝试它。（第16.8.3节）
根据react docs的说法，如果您使用StrictMode，它是一种有意的功能，可以帮助您检测意外的副作用
严格模式不能自动为你检测副作用，但它可以通过使副作用更具确定性来帮助你发现它们。这是通过有意地双重调用以下函数来实现的：
- 类组件构造函数、呈现和shouldComponentUpdate方法
注：这仅适用于开发模式。在生产模式下不会双重调用生命周期。
https://reactjs.org/docs/strict-mode.html#detecting-意外副作用
-
考虑规范的示例： 单击按钮使每个状态打印两次。为什么呢？
-
我已经初始化了一个数组状态，当我更新它时，我的组件不会重新渲染。以下是一个最低限度的概念证明： 根据这段代码，似乎输入应该包含要开始的数字0，并且无论何时更改，状态也应该更改。在输入中输入“02”后，应用程序组件不会重新渲染。但是，如果我在5秒后执行的onChange函数中添加setTimeout，则表明数字确实已更新。 对为什么组件不更新有什么想法吗？ 这是一个带有概念证明的代码沙盒。
-
拥有如此简单的CRAapp： ./index.tsx： ./组件/主页。tsx： 我得到： 在控制台上。 为什么promise履行代码会被触发2次？我知道，对于React Strict模式，组件渲染了两次，但示例显示了一些不一致性-
-
我有一个父功能组件
-
也许你们中的一些人可以帮我睁开眼睛。 我不明白为什么在这段代码中：https://codesandbox.io/s/use-state-renders-twice-6r1xl组件应用程序在安装并单击按钮时呈现两次（console.log被调用两次） 代码： 结果： 它只是一个功能组件挂钩！
-
我开始使用钩子，我遇到了一个问题。 我有一个状态： 最初设置为，它在初始渲染时正确渲染。 但问题是，我希望它的值是我使用hook在初始渲染中获取的数组的长度 但是我不知道阵列的长度，直到组件安装完毕。 所以，在这个函数中，我试图访问priceToFilter，但它返回，因为这是它的初始值。 但是，如果您在中看到，我将通过函数将设置为另一个值。但是，当发生在初始化挂载之后时，它不会获得新值，而是保持