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

Question

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

例如

如果我有一个功能组件（组件）并在其中直接使用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
    })
}

现在，如果我在 Component 中使用这个自定义钩子

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

   useCustomHook();

    return(<div>Component</div>)

}

我想知道

useEffect hook 是否与Component相关，因此它的回调仅在Component呈现后运行，因为在使用useCustomHook时，它是在Component外部声明的，即它在自定义挂钩内，但回调 get 也仅在Component之后调用呈现，

那么useEffect和Component是否有任何关系，所以useEffect get 的回调只有在Component渲染后才被调用，无论useEffect是在Component内部还是外部声明的，即（useCustomHook）

Answer 1

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

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

Answer 2

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

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

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