反应 useEffect 正在运行并获取数据不停答案

【问题标题】：react useEffect is running and fetching data none stop反应 useEffect 正在运行并获取数据不停
【发布时间】：2018-11-10 13:32:35
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

这里发生的事情是 useEffect 正在运行 after each render

useEffect 在每次渲染后运行吗？是的！默认情况下，它在第一次渲染后和每次更新后都运行...

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

如果数组是空的，这意味着这个效果没有“依赖”，它只会运行一次（非常类似于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>
  );
}

【讨论】：