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 Component = () => { callback() return <></>; };

注意：执行时间仍然有所不同（请参阅下一个注意事项）。 Check this sandbox logs。

useEffect(callback,[])

在组件安装上运行一次。

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

注意：在render phase（已知的“ Gotcha”）之后执行回调。

useEffect(callback,[arg])

对值arg进行更改。

“更改时” 是指 shallow comparison ，其先前值为arg。

即比较前一渲染的arg和当前prevArg === arg ? ~Do nothing~ : callback()的值。

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

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

我的additional answer解释了return回调的useEffect语句
A Complete Guide to useEffect by Dan Abramov
useEffect API
Using the effect hook-React文档

Answer 2

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

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

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

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

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

Answer 3

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

它将首先运行，然后在arg更改的情况下再次运行

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

深入了解useEffect / useEffect的使用？

3 个答案: