使用自定义钩子封装 useEffect 和 AJAX 请求

Posted 2023-02-22

【中文标题】使用自定义钩子封装 useEffect 和 AJAX 请求

【英文标题】：Use custom hook to encapsulation useEffect with AJAX request

【发布时间】：2021-07-15 18:24:03

【问题描述】：

全部！我是反应新手。目前，我遇到了一个与反应挂钩相关的问题。问题如下图所示： 设计一个自定义的hook来封装useEffect，可以执行副作用操作（如AJAX请求），设计的自定义hook可以跳过第一次操作，从第二次开始执行副作用操作。

这里我设计了一个钩子，但是不正确。我确实知道钩子的关键是如何判断这是否是第一次调用自定义钩子。有人告诉我应该使用useRef 来计算counter，但我不确定如何设计它 useRef。大家能帮我解答一下这个问题吗？

function useMyCoustomHook(func, dependencies)
    let counter = 1;
    useEffect(()=>
       if(counter === 1)
         counter--;
       else
         func();
       
    , [dependencies])

【参考方案1】：

我删除了依赖项，您应该使用ref，即使组件重新渲染与您的let counter = 1;不同，它也会记住它的值

function useMyCoustomHook(func, dependencies)
    let counter = useRef(0);
    useEffect(()=>
       if(counter.current === 0)
         counter.current++;
       else
         func();
       
    , [dependencies])

   

【讨论】：

createRef 在每次调用 ref 时返回一个新值。我相信你应该useRef。还是我错了？

是的，因为当您使用普通变量时，该变量会在组件重新加载时重新创建，但 ```useRef```` 的行为方式并非如此，即使组件重新渲染，它实际上也会记住它的值跨度>

明白，谢谢！