使用 use自定义钩子内的效果和组件之间有什么区别

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>)

}

我想知道

钩子是否与 相关，所以它的回调只在渲染后运行，因为在使用时它被声明在自定义钩子之外，那么回调 get 也只是在渲染之后调用，useEffectComponentComponentuseCustomHookComponentComponent

那么是否存在任何关系 b/w 和 ，以便仅在渲染后调用 get 的回调，无论在 i.e 内部还是外部声明（使用CustomHook）useEffectComponentuseEffectComponentuseEffectComponent

Answer 1

除非调用自定义钩子，否则不会计算其中的逻辑，因此无论您在其中定义了什么钩子，这些钩子在定义时都不会运行自定义 hook 中的函数只有在函数组件中使用它并调用它时才会运行。另请注意，的行为将保持与写入功能组件本身的行为完全相同useEffectuseEffect

Answer 2

假设在功能组件内部编写了 3 个效果。您还有 2 个自定义挂钩，每个挂钩有 1 种效果。因此，当您在功能组件中使用这些自定义钩子时，您可以想象现在功能组件中总共有5个效果，当条件在呈现组件后满足条件时，将调用这些效果。在功能组件内定义的效果在呈现组件并绘制浏览器后运行。React 还保证所有效果将在下一次渲染之前运行。但是，effect 的回调函数的调用顺序完全取决于执行它所花费的时间。这是一个代码沙盒的链接，解释了我的观点&nbsp;https://codesandbox.io/s/adoring-murdock-5ifil?file=/src/useTry.js