React中这几个常用的自定义Hook，你学会了吗？(2)

useCookieState

在日常的开发中，我们经常会与cookie打交道。我们会将一些用户的基础信息存储在cookie中，当需要用到的时候再取出来，如果用原生的方法去获取，则需要通过document.cookie来进行操作，使用起来非常的不方便，因此ahooks中为我们提供了这样的一个方法useCookieState，具体的API文档可以点击这里进行查看，官网的介绍如下：

一个可以将状态存储在 Cookie 中的 Hook 。

下面我们一起来看一下在开发中如何使用吧！

import { FC } from 'react';
import { useCookieState } from 'ahooks';

// 默认配置
const defaultOptions = {
    // 默认值
    defaultValue: false,
    // cookie 的路径
    path: '/',
    // 过期时间，24小时后
    expires: (() => new Date(+new Date() + 1000 * 60 * 60 * 24))()
};

const Demo: FC = () => {
    const [cookie, setCookie] = useCookieState('cookie名称', defaultOptions);
    
    const handleClickOk = () => {
        // ... other code
    };
    
    return (
        <div>
            <p>当前的状态: {defaultValue ? '已存在' : '不存在'}</p>
            {!cookie ? <MyModal onOk={handleClickOk} /> : null}
        </div>
    )
};

export default Demo;

当用户第一次访问某个页面时，我们可以给用户一个弹窗提醒，并且将用户已经访问过的状态保存在cookie中，用户下次再来时，则不会自动弹窗，只有当cookie过期后用户再次访问页面时才会再次弹窗。

具体的效果可以狠戳这里。

下面我们一起来看一下useCookieState内部是如何实现的吧，具体的源码地址可以点击这里进行查看，我们就摘抄一小部分来分析一下，代码如下：

...other code
// 内部也是借助useState来控制状态
const [state, setState] = useState<State>(() => {
    // 借助 js-cookie 这个第三方库来完成cookie的获取
    const cookieValue = Cookies.get(cookieKey);
    // 判断 cookie 的值
    if (isString(cookieValue)) return cookieValue;
    // 判断配置中的默认值是否是函数
    if (isFunction(options.defaultValue)) {
        return options.defaultValue();
    }
    
    return options.defaultValue;
});

...other code

在上面的代码中，我们可以看到初始化是如何设置的，修改的时候还是调用的setState，具体的代码可以查看源码，它的核心主要还是借助了js-cookie这个第三方的库，其它的都是常规的自定义hook封装原则。

useDebounce

防抖(debounce)在日常的开发中也经常用到，在面试中也会经常要求面试者手写这个方法，并且还会问到防抖与节流的区别，所以ahooks也为我们在提供了这么一个useDebounce自定义hook，它的API文档在这里。

下面一起来看一下在实际开发中我们是怎么使用这个方法的吧。

import { useState } from 'react';
import { useDebounce } from 'ahooks';

const Demo = () => {
    const [value, setValue] = useState<string>();
    // 延迟500毫秒执行
    const debouncedValue = useDebounce(value, { wait: 500 });
    
    return (
        <div>
            <input
                value={value}
                onChange={(e) => setValue(e.target.value)}
                placeholder="Typed value"
                style={{ width: 280 }}
          />
          <p style={{ marginTop: 16 }}>DebouncedValue: {debouncedValue}</p>
        </div>
    )
};

export default Demo;

具体的效果可以狠戳这里，具体如下图所示：

按照惯例，我们一起来看一下useDebounce的源码是怎么实现的吧，具体的源码地址在这里，我们还是截取小部分进行分析，代码如下：

...other code 
const [debounced, setDebounced] = useState(value);

const { run } = useDebounceFn(() => {
    setDebounced(value);
}, options);

useEffect(() => {
    run();
}, [value]);

其实useDebounce内部的实现是基于useDebounceFn这个hook来实现的，所以它本身内部没有多少代码，那么useDebounceFn具体实现了哪些东西呢？我们一起来看一下吧，源码在这里，还是截取小部分代码进行分析，代码如下：

... other code
const fnRef = useLatest(fn);

const wait = options?.wait ?? 1000;

const debounced = useMemo(() => {
    debounce(...args: Parameters<T>): ReturnType<T> => {
        return fnRef.current(...args);
    }, wait, options)
}, [])

这里我们只截取这一段代码就可以大致了解其内部是如何实现的，在这里我们看到debounce这个方法其实是从lodash这个第三方库中引入的，如果对lodash不了解的，可以点击这里进行查看，如果用过lodash中的debounce这个方法，那对这块内容应该就不会陌生了。

最后

写到这里，关于ahooks中常用的方法就介绍完毕了，当然ahooks中还有很多平时很常用的方法，后续会继续分享给大家，如果这篇文章中有什么地方写的不对，欢迎大家在评论区进行留言和讨论。

最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家

往期回顾