4种使用方法效果（）

关于最常用的React钩子之一的另一篇文章。只有我不会详细介绍它是如何工作的，而是写一些示例和模式，以便快速提醒如何以及何时使用它。

这是什么？

它是一个钩子，可以在功能组件内部进行副作用。它将一个函数作为第一个参数，将一个依赖项数组作为第二个参数：

React.useEffect(fn, (deps))` 

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

• 使用当前状态准备UI
• 渲染结果，即
  Hello World!

• 将结果提交给DOM
• 浏览器绘制屏幕
• React调用useEffect（）

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

何时以及如何使用它

它与类组件生命周期方法略有不同。主要区别在于生命周期方法始终具有对最新状态的引用 useEffect() 将兑现每个渲染的状态，处理程序和效果，它将与下一个渲染不同。
但好处是你可以操纵何时调用里面的函数 useEffect() 通过指定依赖列表或不指定。

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

• 一旦组件安装
• 在每个组件渲染
• 在每个组件上呈现条件
• 当组件卸载时

组件安装时

通常，您希望将其用于获取数据或添加事件侦听器。
要运行该函数一次，请添加一个空的依赖项列表。如果它没有依赖关系，那意味着它将一直保持不变，并且不会再次调用该函数。

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

在每个组件上渲染

要在每个组件渲染上调用该函数，请跳过添加依赖关系列表。没有列表，没有什么可比较的，这意味着每次都要运行效果。

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

在每个组件上使用条件渲染

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

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

组件卸载时

要在组件卸载后清理（删除事件侦听器或停止带副作用的数据获取），应在内部添加带有函数的return语句。 useEffect() 钩。

function MyComponent() {     // ...     React.useEffect(() => {         document.addEventListener();          return () => {             document.removeEventListener();         }     }, ())     // ... } 

带走

从本文中删除将始终指定您在效果中使用的依赖项。它将阻止无条件地运行效果，这可能会导致无限循环和性能问题。