为什么我的组件渲染了两次?
导出默认函数 App() {console.log("asd");const [count, setCount] = useState(0);返回 (<div><标题计数={count}/><按钮onClick={() =>{设置计数(计数 + 1)；}}/>);}//控制台=asd"asd"
它呈现两次，但如果我删除 useState 它不会发生
你的应用可能被 React.StrictMode 包裹.StrictMode 是一种用于突出应用程序中潜在问题的工具.
StrictMode 目前有助于:
识别生命周期不安全的组件
关于旧字符串引用 API 使用的警告
关于已弃用的 findDOMNode 用法的警告
检测意外的副作用
检测遗留上下文 API
严格模式无法自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们.这是通过有意双重调用以下函数来实现的:
类组件构造函数、render 和 shouldComponentUpdate 方法
类组件静态 getDerivedStateFromProps 方法
函数组件主体(你的应用是函数组件)
状态更新器函数(setState 的第一个参数)
传递给 useState、useMemo 或 useReducer 的函数
why my component is rendering twice?
export default function App() {
console.log("asd");
const [count, setCount] = useState(0);
return (
<div>
<Title count={count} />
<button
onClick={() => {
setCount(count + 1);
}}
/>
</div>
);
}
//console= "asd" "asd"
its rendering two times, but if I remove the useState it does not happen
Your app might be wrapped by React.StrictMode. StrictMode is a tool for highlighting potential problems in an application.
StrictMode currently helps with:
Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:
这篇关于用钩子反应渲染两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！