反应 useEffect 是运行并且获取数据 none 停止

Question

我有一个使用反应挂钩的简单反应组件。我正在使用 useEffect 和 useState。
问题是我意识到我的 API 获得了大量点击，调试后我看到 useEffect 是运行 none 停止！

这是我非常简单的代码：

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 是运行ning after each render

Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update...

有一种方法可以做到 Optimizing Performance by Skipping Effects，您可以将数组作为第二个参数传递。

如果数组为空，则表示此效果没有"dependencies"，它只会运行一次（与componentDidMount非常相似）。

如果数组有值，那么只有当这些值改变时效果才会重新运行（类似于我们对componentDidUpdate所做的）。

因此，在您的情况下，传递具有 userId 值的数组是明智的，因为您需要重新运行效果并仅在 [=14] 时获取用户数据=] 已经改变。

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

反应 useEffect 是运行并且获取数据 none 停止

react useEffect is running and fetching data none stop

javascript

reactjs

react-hooks

反应 useEffect 是 运行 并且获取数据 none 停止

react useEffect is running and fetching data none stop

javascript

reactjs

react-hooks

反应 useEffect 是运行并且获取数据 none 停止