ahooks 中巧用时机 Hook，玩转代码控制

2023-10-20 15:41:14

ahooks 时机 Hook 的实现原理

ahooks 中的时机 Hook 主要基于 React 的两个内置 Hook：useEffect 和 useLayoutEffect。这两个 Hook 提供了在特定生命周期阶段执行代码的功能。

useEffect ：在组件渲染后（包含首次渲染和后续更新）执行代码，且该代码在 DOM 更新之前执行。
useLayoutEffect ：与 useEffect 类似，但在 DOM 更新之后执行代码。

ahooks 中的时机 Hook 通过组合和封装 useEffect 和 useLayoutEffect，实现了更精细的代码执行时机控制。例如：

useMount ：仅在组件首次渲染时执行代码。
useUnmount ：仅在组件卸载时执行代码。
useDidUpdate ：仅在组件更新后执行代码。

这些 Hook 的实现原理如下：

// useMount
const useMount = (fn) => useEffect(() => fn(), []);

// useUnmount
const useUnmount = (fn) => useEffect(() => () => fn(), []);

// useDidUpdate
const useDidUpdate = (fn, deps) => {
  const didMountRef = useRef(false);
  useEffect(() => {
    if (!didMountRef.current) {
      didMountRef.current = true;
      return;
    }
    fn();
  }, deps);
};

ahooks 时机 Hook 的使用示例

ahooks 的时机 Hook 广泛应用于各种场景，以下是一些使用示例：

在组件卸载时释放资源

import { useUnmount } from 'ahooks';

const MyComponent = () => {
  const cleanup = () => {
    // 释放资源
  };

  useUnmount(cleanup);

  return <div>组件内容</div>;
};

在 DOM 更新后执行代码

import { useLayoutEffect } from 'ahooks';

const MyComponent = () => {
  const measure = () => {
    // 获取 DOM 元素尺寸
  };

  useLayoutEffect(() => {
    measure();
  }, []);

  return <div>组件内容</div>;
};

在首次渲染时执行特定逻辑

import { useMount } from 'ahooks';

const MyComponent = () => {
  const init = () => {
    // 初始化逻辑
  };

  useMount(init);

  return <div>组件内容</div>;
};