去抖、节流的 react-hook 自封装

[ninohwang]

正文

TODO

最后 - 文末一些碎碎念

写下这些主要还是为了提醒下自己：

步入社会多年（虽然半路转行前端，根基不牢），不能总还留着学生思维，具体是学生思维的哪方面特点呢？这里可能没法描述得太清晰准确——类似于常常觉得怎么才算学会了/掌握了呢，一定是能“闭卷考试”下，独立实现才算，提前看了“答案”就不能算了，就掺了水分了，类似于这样的思维吧。

过往自己实现过 useDebounce / useThrottle ,虽然当时也是跟着个入门视频课程来的。视频课的老师讲得深入浅出，不过当时的个人随堂笔记却做得很差，各笔记的整理工作也不到位，现在回头看已是“惨绝人寰的不堪入目”。

这段时间，打算再稍微复习下一些常用功能级 hook 的内部实现时，一开始还是迷信于当时的笔记，一番功夫翻找出来，费半天时间去猜测当时的一些写法，包括如——

当时手写代码实现的这一行，为啥是这样写，为啥需要 funcRef = useRef(null); funcRef.current = targetFunc 来把要处理的函数作一个 ref 固定指向呢；为啥需要把 ms/delay 作为 hook 依赖项；这里简单贴一个当时简单实现的代码片段：

function useDebounce(func, ms) {
    const ref = useRef()
    ref.current = func
    return useMemo(
        () => FuncUtils.debounce((...args) => ref.current.apply(null, args), ms),
        // () => FuncUtils.debounce(ref.current, ms),
        [ms]
    )
}

但是这种“迷信”有用吗？或者说有多大意义呢，实际上，视频课的实现可能也就是告诉听课的一个实现理念，但是多半不是考虑全面、考虑到种种边缘场景的“最佳实现”，所以个人情况为前提来说，还迷信一份当时的初入门视频教授、以及初入门时的笔记记录，算是很呆槑了。

一句话翻个面

牵扯出来现下的一些感受：react hook 的使用虽然对逻辑解耦，便于封装，支持高度自定义一些基础功能向，或者业务向的 hook，但是有时依赖数组的确定、以及指向的“缓存”固定，感觉还是有不小的心智负担。至少现阶段对我来说是如此的。

若果需要对 react hook 有个较全面的认识和使用，自己尝试实现一遍一定有着不会被忽视的意义。

配合着直接去看下知名 react hook 第三方库比如 useThrottle useDebounce 的健全实现，读懂别人的实现方式，然后如此再”照虎画猫“的实现一下，说不出啥特别升华的话，就是如此时间成本上会省上不少。当然也有所谓弊端，一开始思想就是用上了别人的模具，从模仿学习出发，不过见仁见智。

贴上链接

后续实现去抖、节流的 react-hook，先读懂如下别人的实现再说：
https://github.com/alibaba/hooks
https://github.com/streamich/react-use

宽心认知

所谓“牢骚太盛防肠断，风物长宜放眼量”。当下能自洽就是好的。