Question

我想使用组件中的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时它是在{之外声明的{1}}，即它位于自定义钩子内，但只有在Component渲染后，才调用回调get，

b / w Component和useEffect之间存在任何关系，因此Component的回调仅在useEffect呈现后才被调用，无论{{ 1}}在Component的内部或外部进行声明，即（useCustomHook）

Answer 1

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

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

Answer 2

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

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

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

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

2 个答案: