深度使用效果

Question

试图深入了解useEffect生命周期钩子，并帮助我理解同样的情况。

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

我想知道何时使用哪种方法，为什么使用？

Answer 1

useEffect(callback)

在每个组件渲染上运行。

通常仅用于调试，类似于在每个渲染器上执行函数的主体：

const App = () => {
  callback()
  return <></>;
};

---

useEffect(callback,[])

在组件安装架上运行一次。

通常用于通过数据提取等进行初始化

Note：在render phase（已知的“ Gotcha”）的after中执行回调。

---

useEffect(callback,[arg])

运行onargchange。

“ On Change”引用具有先前值shallowing comparing的arg。

通常用于在道具/状态变更时运行事件。

注意：可以提供多种依存关系：[arg1,arg2,arg2...]

Answer 2

如果您熟悉React类的生命周期方法，可以将useEffect Hook视为componentDidMount，componentDidUpdate和componentWillUnmount的组合。

1.useEffect，不带第二个参数：当我们希望组件刚刚挂载或已更新时发生某些事情时，将使用此函数。从概念上讲，我们希望它在每次渲染后发生。

2.useEffect，第二个参数为[]：当我们希望在组件安装时发生某些事情时，如果在安装时仅执行一次，则使用此函数。它更接近于熟悉的componentDidMount和componentWillUnmount。

3.useEffect，并在第二个参数中传递了一些参数：当我们希望在编译器传递例如时发生某些事情时，使用此方法。 args在您的情况下已更改。

更多信息。检查这里：https://reactjs.org/docs/hooks-effect.html