在自定义钩子和组件中使用 useEffect 有什么区别答案

【问题标题】：what is the difference between using useEffect inside a custom hook and a component在自定义钩子和组件中使用 useEffect 有什么区别
【发布时间】：2020-06-11 16:59:56
【问题描述】：

我想知道在组件中使用 useEffect 钩子和自定义钩子的黑白区别。

例如

如果我有一个功能组件（Component）并在里面直接使用useEffect钩子

import React,{useEffect} from 'react';

function Component(){
   useEffect(()=>{
       //some code                     //callback fires after component renders
   },)

   return (<div>Component</div>)

}

如果创建自定义钩子（useCustomHook）

import React,{useEffect} from 'react';
function useCustomHook(){
   useEffect(()=>{
      //some code     //this callback also get fired after component renders
    })
}

现在如果我在组件中使用这个自定义钩子

import useCustomHook from 'customhook';
import React,{useEffect} from 'react';
function Component(){

   useCustomHook();

    return(<div>Component</div>)

}

我想知道

useEffect 钩子是否与Component 相关，因此它的回调仅在Component 渲染后运行，因为在使用useCustomHook 时，它是在Component 之外声明的，即它在自定义内部钩子，但也只有在 Component 呈现后才会调用回调函数，

那么useEffect和Component之间有什么关系吗，所以useEffect的回调只有在Component渲染之后才会被调用，无论useEffect是在内部还是外部声明的Component 即（使用CustomHook）

【问题讨论】：

标签： javascript reactjs react-hooks use-effect

【解决方案1】：

除非调用自定义钩子，否则不会评估其中的逻辑，因此无论您在其中定义什么钩子，这些钩子都不会在定义时运行

自定义钩子中的useEffect 函数只有在您在功能组件中使用并调用它时才会运行。另请注意，useEffect 的行为将与编写在功能组件本身中的行为完全相同

【讨论】：

你说，自定义钩子里面的useEffect函数只有在函数组件里面使用它并调用它时才会运行，所以你是说useEffect钩子还是回调函数，其次是调用吗？表示 useEffect 或自定义钩子
我的意思是两者都有，直到您在功能组件中调用自定义钩子，或者您在功能组件中定义 useEffect 并将其呈现在某个地方
所以这意味着在自定义钩子中使用 useEffect 与在功能组件中直接使用它相同，它的行为相同，即回调将在组件渲染上运行
是的，但是当您在多个组件中具有相同的逻辑时，它会提供抽象
谢谢，你能回答我的另一个问题吗？这对我很有帮助stackoverflow.com/suggested-edits/4845636

【解决方案2】：

假设您在功能组件内部编写了 3 个效果。您还有 2 个自定义钩子，每个钩子有 1 个效果。因此，当您在功能组件中使用这些自定义挂钩时，您可以想象现在功能组件内部共有 5 个效果器，当组件渲染后满足条件时，它们的回调函数将被调用。

在功能组件内部定义的效果在组件被渲染并且浏览器被绘制之后运行。 React 还保证所有效果都将在下一次渲染之前运行。但是调用效果的回调函数的顺序完全取决于执行它所花费的时间。

这是一个代码沙盒的链接，解释了我的观点 https://codesandbox.io/s/adoring-murdock-5ifil?file=/src/useTry.js

【讨论】：