javascript - 反应 useEffect 正在运行并获取数据不停
问题描述
我有一个使用反应钩子的简单反应组件。我正在使用 useEffect 和 useState。
问题是我意识到我的 API 正在获得大量点击,调试后我看到 useEffect 正在不停地运行!
这是我非常简单的代码:
function DisplayUser({userId}) {
const [loggedUser, setLoggedUser] = React.useState(null);
React.useEffect(() => {
fetchData(userId).then(user => {
setLoggedUser(user);
})
});
return (
<div>
<div>{loggedUser}</div>
</div>
);
}
解决方案
这里发生的是在每次渲染后useEffect
运行
每次渲染后都会运行 useEffect 吗?是的!默认情况下,它在第一次渲染后和每次更新后都运行......
有一种方法可以通过跳过效果来优化性能,您可以将数组作为第二个参数传递。
如果数组是空的,这意味着这个效果没有“依赖关系”,它只会运行一次(非常类似于componentDidMount
)。
如果数组有值,那么只有当这些值发生变化时效果才会重新运行(类似于我们用 做的componentDidUpdate
)。
因此,在您的情况下,传递带有该userId
值的数组是明智的,因为您需要重新运行效果并仅在userId
更改时才获取用户数据。
function DisplayUser({userId}) {
const [loggedUser, setLoggedUser] = React.useState(null);
React.useEffect(() => {
fetchData(userId).then(user => {
setLoggedUser(user);
})
}, [userId]); // only run when userId changed
return (
<div>
<div>{loggedUser}</div>
</div>
);
}
推荐阅读
- javascript - 使用多行的 Heredoc 不起作用
- java - 如何使用 textviews 创建 json?安卓工作室
- apache-spark - 使用 MEMORY_AND_DISK 缓存/持久化会丢失数据吗?
- asp.net - SQL Server 拒绝连接
- mongodb - Spring Rest 存储库集合名称区分大小写
- python-3.x - Pandas Dataframe 未使用 PyDev 插件显示 Eclipse IDE 中的所有输出列
- flutter - 如何使用自定义 UI 在 Flutter 中实现 Facebook 帐户工具包
- angular - NativeScript Angular2为数据绑定函数传递上下文参数
- java - Java - 带有用户输入的二维数组乘法表有太多的行和列
- excel - VBA函数从具有连续条件的表创建数组