ahooks 的生命周期函数源码你读过吗？useMount 和 useUnmount 有何异同？

在React生态中，生命周期管理始终是组件开发的核心课题。当我们从class组件转向函数式组件时，ahooks作为企业级React Hooks库，为开发者提供了更精细的生命周期控制方案。其中useMount和useUnmount这对黄金组合，正是组件生命周期管理的利器。本文将通过源码解析、场景对比和实践案例，带您揭开这两个Hook的神秘面纱。

二、源码级深度解析

2.1 useMount源码实现

import { useEffect } from 'react';
const useMount = (fn: () => void) => {
  useEffect(() => {
    if (isFunction(fn)) {
      return fn();
    } else if (isDev) {
      console.warn('useMount参数必须是函数');
    }
  }, []);
};

核心机制解读：
1. 基于useEffect实现，依赖数组为空([])保证只在挂载时执行
2. 严格的类型校验：通过isFunction检测参数有效性
3. 开发环境下的错误预警机制

2.2 useUnmount源码揭秘

const useUnmount = (fn: () => void) => {
  const fnRef = useRef(fn);
  fnRef.current = fn;

  useEffect(() => {
    return () => {
      if (isFunction(fnRef.current)) {
        fnRef.current();
      }
    };
  }, []);
};

关键技术点：
1. 使用useRef保持函数引用稳定性
2. 通过useEffect返回的cleanup函数实现卸载逻辑
3. 内存泄漏防护机制

三、双生子Hook的异同对比

3.1 核心差异点

3.2 协同使用场景

典型应用案例：

const AudioPlayer = () => {
  const audioRef = useRef(null);

  useMount(() => {
    audioRef.current = new Audio(url);
    audioRef.current.play();
  });

  useUnmount(() => {
    audioRef.current.pause();
    audioRef.current = null;
  });

  return / ... /;
}

四、最佳实践指南

4.1 黄金法则

• 严格限制使用范围：仅处理与组件生命周期强相关的逻辑
• 避免副作用传染：异步操作需配合useUnmountedRef使用
• 类型安全优先：使用TypeScript进行参数校验

4.2 性能优化策略

// 优化后的资源加载方案
useMount(() => {
  const controller = new AbortController();
  fetchData({ signal: controller.signal });
  
  return () => controller.abort();
});

五、常见误区警示

5.1 典型错误模式

危险示例：

// 错误！可能导致内存泄漏
useMount(async () => {
  const data = await fetchData();
  setState(data);
});

5.2 正确解决方案

// 使用unmountedRef保证安全
const unmountedRef = useUnmountedRef();

useMount(() => {
  fetchData().then(data => {
    if (!unmountedRef.current) {
      setState(data);
    }
  });
});

六、从源码看设计哲学

通过源码分析可见ahooks团队的设计智慧：
1. 最小化封装原则：保持API简洁性
2. 防御性编程：严格的参数校验机制
3. 内存管理：通过ref解决闭包陷阱
4. 开发友好：完善的warning提示系统

掌握useMount和useUnmount的正确使用姿势，不仅能提升代码健壮性，更能深入理解React组件生命周期的本质逻辑。建议开发者结合项目实际需求，在复杂状态管理、资源回收等场景中灵活运用这对黄金组合。