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

【问题标题】：Use custom hook to encapsulation useEffect with AJAX request使用自定义钩子封装 useEffect 和 AJAX 请求
【发布时间】：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])
}

【问题讨论】：

标签： reactjs react-hooks

【解决方案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```` 的行为方式并非如此，即使组件重新渲染，它实际上也会记住它的值跨度>
明白，谢谢！