为什么我的组件渲染两次?
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"
它渲染了两次,但如果我删除useState,它就不会发生
您的应用程序可能被React.StrictMode包装。StrictMode是一种突出应用程序中潜在问题的工具。
StrictMode当前有助于:
识别具有不安全生命周期的组件
关于遗留字符串参考API使用的警告
关于不推荐使用的findDOMNode使用的警告
检测意外副作用
正在检测遗留上下文API
严格模式不能自动为您检测副作用,但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意双重调用以下函数来实现的:
类组件构造函数、渲染器和shouldComponentUpdate方法
类组件静态getDerivedStateFromProps方法
功能组件主体(您的应用程序是功能组件(
状态更新器函数(setState的第一个参数(
传递给useState、useMemo或useReducer 的函数
更多详细
对于React 18:在开发模式中,组件将重新安装一次!在useEffect中处理它,并为过时的响应使用清理函数。
来自下面发布的链接,由核心反应团队成员撰写:
一个原因是,如果您使用严格模式运行,我们现在将重新装载每个组件在开发过程中一次。(如果这看起来很漂亮侵入性,考虑到每次您将文件保存到无论如何都要进行开发--以获取您的代码编辑。此行为在到目前为止已经两年了,所以这并不是什么新鲜事。(这个通常不会坏如果您的代码忽略了过时的响应,则返回您的代码。如果没有意味着你有需要修正的比赛条件——以下是如何通过添加清理功能来修复它们。如果使用外部缓存(或者自己实现(,你甚至看不到重复请求。但是,如果您的代码可以处理无序到达的响应。(如果他们也是烦人,你可以完全删除严格模式,但我不明白为什么你需要。(
https://www.reddit.com/r/reactjs/comments/vi6q6f/what_is_the_recommended_way_to_load_data_for/