反应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>
  );
}