两个useEffect与一个useEffect中的两个API调用

Question

安装组件时，我需要从两个API端点获取数据。现在我有：

  useEffect(() => {
    dispatch(loadSomeDataOne());
  }, [dispatch]);

  useEffect(() => {
    dispatch(loadSomeDataTwo());
  }, [dispatch]);

我当时想在一次使用中做到这一点：

  useEffect(() => {
    dispatch(loadSomeDataOne());
    dispatch(loadSomeDataTwo());
  }, [dispatch]);

这两种解决方案之间有区别吗？哪个更好？

Answer 1

不。使用多个useEffect主要是为了让副作用订阅不同的变量更新。例如，您可能有：

  useEffect(() => {
    dispatch(loadSomeDataOne(varA));
  }, [varA]);

  useEffect(() => {
    dispatch(loadSomeDataTwo(varB));
  }, [varB]);

这样，在更新useEffect或varA时，仅执行所需的varB。如果希望所有内容同时运行，则只需要1 useEffect。

Answer 2

在本文中，您将了解useEffect https://www.robinwieruch.de/react-hooks-fetch-data 对我来说：因为只想在组件安装时调用API，所以可以编写如下代码：

 useEffect(() => {
    dispatch(loadSomeDataOne());
    dispatch(loadSomeDataTwo());
  }, []);

这意味着您只希望两次调用函数加载数据