具有相同 deps 的几个 useEffect

Question

我在开发 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

的功能

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

谢谢

Answer 1

有很多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>
}

Answer 2

最佳实践是：

使您的代码易于阅读。
易于维护。
遵循常见的最佳实践，例如 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]);

具有相同 deps 的几个 useEffect

several useEffect with same deps

reactjs

react-hooks

use-effect