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

Question

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

例如

如果我有一个功能组件(组件(并直接在其中使用useEffect钩

子

import React,{useEffect} from 'react';
function Component(){
useEffect(()=>{
//some code                     //callback fires after component renders
},)
return (<div>Component</div>)
}

如果 创建一个自定义钩子 (使用自定义钩子(

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之外声明的，即它在自定义钩子内部，但回调 get 仅在Component渲染后调用

，那么useEffect和Component是否有任何关系，以便仅在Component渲染后调用useEffectget的回调，无论useEffect是在Component内部还是外部声明的，即(useCustomHook(

Answer 1

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

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

Answer 2

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

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

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