ahooks 源码解读系列 - 7 - 理解 ahooks 的思想精华，迈出自定义 hook 的第一步

2023-11-04 09:04:21

ahooks 是一个 React hook 库，提供了许多开箱即用的 hook，可以帮助开发者快速构建 React 应用。ahooks 源码解读系列是一个旨在帮助开发者更好地理解 ahooks 的源码和设计思想的文章系列。本文是该系列的第七篇，我们将继续深入剖析 ahooks 的源码，了解它的思想精华，并帮助读者迈出自定义 hook 开发的第一步。

在本文中，我们将首先介绍自定义 hook 的基本概念和原理，然后通过对 ahooks 中一些常用的 hook 的实现进行解读，帮助读者理解 ahooks 的设计思想。最后，我们将讨论自定义 hook 的最佳实践和常见陷阱，以便读者能够在开发自定义 hook 时避免这些问题。

自定义 hook 的基本概念和原理

自定义 hook 是 React 中的一种特殊函数，它允许开发者在组件之外复用状态和逻辑。自定义 hook 可以用来管理状态、处理事件、与外部数据交互等。自定义 hook 的基本原理是：创建一个函数，并在函数中使用 React 的内置 hook，然后将这个函数导出，以便其他组件可以使用。

例如，我们可以创建一个名为 useCounter 的自定义 hook，它可以用来管理一个计数器状态。这个 hook 可以通过以下步骤创建：

创建一个名为 useCounter 的函数。
在 useCounter 函数中使用 React 的 useState hook 来创建一个计数器状态。
在 useCounter 函数中返回计数器状态和一个用于更新计数器状态的函数。
将 useCounter 函数导出。

其他组件可以使用 useCounter hook 来管理计数器状态。例如，以下组件使用 useCounter hook 来管理一个按钮的点击次数：

import { useCounter } from 'ahooks';

const MyComponent = () => {
  const [count, setCount] = useCounter(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
};

ahooks 中一些常用的 hook 的实现

ahooks 中提供了许多开箱即用的 hook，这些 hook 可以帮助开发者快速构建 React 应用。在本文中，我们将对 ahooks 中一些常用的 hook 的实现进行解读，以便读者更好地理解 ahooks 的设计思想。

`useDebounce` hook

useDebounce hook 可以用来对函数进行防抖处理。防抖处理是指在一定时间内只执行一次函数，即使函数被多次调用。useDebounce hook 的实现如下：

export function useDebounce<T extends (...args: any[]) => any>(fn: T, ms: number, deps: any[] = []) {
  const [debouncedFn, cancel] = useMemo(() => {
    let timeout: TimeoutHandle | null = null;
    const func = (...args: Parameters<T>) => {
      if (timeout !== null) clearTimeout(timeout);
      timeout = setTimeout(() => {
        fn(...args);
        timeout = null;
      }, ms);
    };
    return [func, () => clearTimeout(timeout)];
  }, [fn, ms, ...deps]);
  useEffect(() => cancel, [cancel]);
  return debouncedFn;
}

useDebounce hook 使用了 React 的 useMemo 和 useEffect hook 来实现防抖处理。useMemo hook 用于创建一个 memoized 函数，该函数只会在其依赖项改变时重新计算。useEffect hook 用于在组件卸载时取消防抖处理。

`useThrottle` hook

useThrottle hook 可以用来对函数进行节流处理。节流处理是指在一定时间内只执行一次函数，即使函数被多次调用。useThrottle hook 的实现如下：

export function useThrottle<T extends (...args: any[]) => any>(fn: T, ms: number, deps: any[] = []) {
  const [throttledFn, cancel] = useMemo(() => {
    let timeout: TimeoutHandle | null = null;
    let isLeading = false;
    const func = (...args: Parameters<T>) => {
      if (isLeading) return;
      isLeading = true;
      fn(...args);
      if (timeout !== null) clearTimeout(timeout);
      timeout = setTimeout(() => {
        isLeading = false;
        timeout = null;
      }, ms);
    };
    return [func, () => clearTimeout(timeout)];
  }, [fn, ms, ...deps]);
  useEffect(() => cancel, [cancel]);
  return throttledFn;
}

useThrottle hook 使用了 React 的 useMemo 和 useEffect hook 来实现节流处理。useMemo hook 用于创建一个 memoized 函数，该函数只会在其依赖项改变时重新计算。useEffect hook 用于在组件卸载时取消节流处理。

自定义 hook 的最佳实践和常见陷阱

在开发自定义 hook 时，有一些最佳实践和常见陷阱需要注意。以下是一些最佳实践：

使用性名称： 自定义 hook 的名称应该能够准确地它的功能。这将使其他开发者更容易理解和使用您的 hook。
保持简洁： 自定义 hook 应该保持简洁和易于理解。避免在自定义 hook 中加入太多复杂的逻辑。
避免重复： 在开发自定义 hook 时，应尽量避免重复代码。如果需要在多个地方使用相同的逻辑，可以创建一个单独的函数或组件来封装该逻辑，然后在不同的自定义 hook 中复用。

以下是一些常见的陷阱：

使用全局状态： 在自定义 hook 中使用全局状态是一个常见的陷阱。这将导致自定义 hook 与组件紧密耦合，难以重用。
滥用自定义 hook： 自定义 hook并不是万能的。并非所有逻辑都适合放在自定义 hook 中。在决定是否使用自定义 hook 时，应考虑以下因素：
- 该逻辑是否可以在多个组件中复用？
- 该逻辑是否足够简单，可以放在一个自定义 hook 中？
- 该逻辑是否会使自定义 hook 变得复杂和难以理解？