react useEffect正在不停地运行和获取数据

Question

我有一个简单的react组件，它使用react钩子。我正在使用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>
);
}

Answer 1

这里发生的事情是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>
);
}