具有相同 deps 的多个 useEffect答案

【问题标题】：React, several useEffect with same dependencies, is't bad?具有相同 deps 的多个 useEffect
【发布时间】：2022-01-09 14:13:31
【问题描述】：

我在开发 ReactJS 时遇到了一些问题

// a.jsx
const Main = () => {
  useEffect(() => {
    console.log(1);
  }, []);

  useEffect(() => {
    console.log(2);
  }, []);

  return <p>asdf</p>
}

//b.jsx
const Main = () => {
  useEffect(() => {
    console.log(1);
    console.log(2);
  }, []);

  return <p>asdf</p>
}

比如a.jsx，有几个useEffect有相同的deps。

b.jsx，我已经通过一个 useEffect 收集了函数

有什么不同？哪一个是最佳做法？

谢谢

【问题讨论】：

标签： reactjs react-hooks use-effect

【解决方案1】：

最佳做法是：

让您的代码易于阅读。
易于维护。
遵循常见的最佳做法，例如 DRY（不要重复自己）。

我认为最后一个适用于此。具有空依赖数组的useEffect大致等同于componentDidMount 的生命周期。一个组件每次安装只能安装一次，因此您可以通过将所有安装逻辑放入单个安装useEffect 挂钩来减少（不重复）代码。

// b
useEffect(() => {
  console.log(1);
  console.log(2);
}, []);

如果稍后在重新渲染期间某些逻辑具有相同的依赖关系，那么从逻辑上讲，将它们放入单个效果挂钩中仍然是有意义的。

// b
useEffect(() => {
  console.log(1);
  console.log(2);
}, [depA, depB]);

即使它们具有相同的依赖关系，但您想在内部有条件地调用某些函数，仍然将它们放入单个效果挂钩中是有意义的。

// b
useEffect(() => {
  console.log(1);
  if (depB) {
    console.log(2);
  }
}, [depA, depB]);

当依赖项不同时，您需要使用单独的效果。

// a
useEffect(() => {
  console.log(1);
}, [depA]);

// b.jsx
useEffect(() => {
  if (depC) {
    console.log(1);
  }
  console.log(2);
}, [depB, depC]);

【讨论】：

【解决方案2】：

拥有多个useEffect 不是问题，但为了可维护性，如果可能的话，拥有一个是最佳选择。但是，在某些情况下你不能，例如，如果你有不同的依赖关系，像这样：

const Main = () => {
  // this one runs one time when the component mount the first time
  useEffect(() => {
    console.log(1);
  }, []);
  
   // this one runs every time someVarible changes and when the component mount the first time
  useEffect(() => {
    console.log(2);
  }, [someVariable]);

  return <p>asdf</p>
}

【讨论】：

这是否意味着拥有一个 useEffect 比拥有多个要快“一点点”？
不，它让你的代码更干净。