深入了解useEffect / useEffect的使用？

10

我试图深入了解这个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])

javascript reactjs react-redux

— 约翰尼
source

3

1.在安装和每个依赖项更新（任何状态/道具更改）时被调用。2.仅在安装时调用，因为您指定了空的依赖关系列表。3.调用挂载和更改任何列出的依赖项

— ajobi

2

Dan Abramov已撰写了一篇有关useEffect的出色博客文章：overreacted.io/a-complete-guide-to-useeffect。您应该阅读它；-)

— rphonika

18

useEffect(callback)

在每个组件渲染上运行。

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

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

useEffect(callback,[])

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

通常用于通过数据获取等初始化组件状态。

注：执行回调后的呈现阶段（称为“疑难杂症”）。

useEffect(callback,[arg])

在arg价值变化上运行。

“更改时”是指与上一个值进行浅层比较arg（比较arg上一个渲染的值与当前渲染的值prevArg === arg ? Do nothing : callback()）。

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

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

— 丹尼斯·瓦什（Dennis Vash）
source

1

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

1.useEffect，不带第二个参数：当我们希望组件刚刚挂载或已经更新时，会发生这种情况。从概念上讲，我们希望它在每次渲染后发生。

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

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

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

— 尼勒什比什
source

0

3.useEffect，第二个参数中传递了一些参数useEffect（（）=> {}，[arg]）

它会先运行，然后如果arg更改它将再次运行

您也忘记了要问useEffect内部的返回值...它的清理用途将在组件卸装时运行

— 阿布·杜哈纳（Abu Dujana Mahalail）
source