reactjs - 两个 useEffect 与一个 useEffect 内的两个 API 调用

Question

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

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

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

我想在一次 useEffect 内完成它:

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

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

Answer 1

不。使用多个 useEffect 主要用于订阅不同变量更新的副作用。例如，您可能有:

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

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

这样，当 varA 或 varB 更新时，只有所需的 useEffect 才会执行。如果您希望所有内容同时运行，那么您只需要 1 个 useEffect。