useEffect() 的 4 种方法

又一篇关于最常用的 React Hooks 的文章。我不会过多地讲解它的工作原理，而是会写一些示例和模式，以便快速回顾如何以及何时使用它。

它是什么？

它是一个钩子，允许在函数组件内部产生副作用。它接受一个函数作为第一个参数，一个依赖项数组作为第二个参数：

React.useEffect(fn, [deps])`

它在渲染中被调用，如下所示：

• 准备当前状态的 UI
• 渲染结果，即<div>Hello World!</div>
• 将结果提交给 DOM
• 浏览器绘制屏幕
• React 调用 useEffect()

在渲染周期的最后阶段，useEffect()会使用本次调用的状态、处理程序和效果进行调用。因此，每次渲染都会有其特定的属性，这些属性永远不会改变，但 React 始终会应用最后一次渲染的结果。

何时以及如何使用它

它与类组件的生命周期方法略有不同。主要区别在于，生命周期方法始终引用最新状态，而useEffect()每次渲染都会更新状态、处理程序和效果，并且每次渲染都会有所不同。但好处在于，你可以通过指定依赖列表或不指定依赖列表来
控制何时调用内部函数。useEffect()

我想到了调用该方法的四种可能方式：

• 一次，当组件安装时
• 在每个组件渲染时
• 在每个组件渲染时都带有条件
• 当组件卸载时

当组件安装时

通常，你会用它来获取数据或添加事件监听器。
要运行该函数一次，请添加一个空的依赖项列表。如果列表中没有依赖项，则意味着它将始终保持不变，并且不会再次调用该函数。

function MyComponent() {
    // ...
    React.useEffect(() => {
        callMeOnlyOnce()
    }, [])
    // ...
}

在每个组件上渲染

要在每次组件渲染时调用该函数，请跳过添加依赖项列表的步骤。没有列表，就没有可比较的对象，这意味着每次都会运行该效果。

function MyComponent() {
    // ...
    React.useEffect(() => {
        runThisFunctionOnEveryRender();
    })
    // ...
}

每个组件渲染时都需设置条件

要有条件地调用函数，请指定依赖项列表。
经验法则是始终在 .js 文件中添加您正在使用的依赖项useEffect()。

function MyComponent() {
    // ...
    React.useEffect(() => {
        runIfOneOfTheDepsWillChange(dep1, dep2);
    }, [dep1, dep2])
    // ...
}

当组件卸载时

为了在组件卸载后进行清理（删除事件监听器或停止具有副作用的数据提取），应在useEffect()钩子内添加带有函数的返回语句。

function MyComponent() {
    // ...
    React.useEffect(() => {
        document.addEventListener();

        return () => {
            document.removeEventListener();
        }
    }, [])
    // ...
}

外卖

本文的要点是始终指定效果中使用的依赖项。这将防止无条件运行效果，从而避免无限循环和性能问题。