本文介绍通过函数复用和参数化设计消除 react 自定义 hook 中重复方法的实践方案，利用单一通用函数替代多个仅事件类型不同的方法，提升代码可维护性与简洁性。
在 react 开发中，自定义 Hook 是封装可复用逻辑的有力工具，但若设计不当，容易因“为不同语义创建独立函数”而引入大量重复代码。如你所示，fireScreenDisplayed 和 fireScreenCompleted 两方法逻辑完全一致，仅在事件类型字符串（如 ‘ScreenDisplayed’）上存在差异——这正是典型的“语义冗余”，而非功能差异。
✅ 正确解法是提取共用逻辑为单一函数，并将差异化参数（如事件名、屏幕标识）外移至调用层或 Hook 初始化层。以下是两种推荐实现方式：
方案一：Hook 返回参数化通用函数（推荐 ✅）
将事件类型作为参数传入，保持 Hook 纯净、灵活且无状态耦合：
// useAnalytics.ts import { useCallback, useState } from 'react'; const useAnalytics = () => { const [done, setDone] = useState(false); const checkDone = true; // 假设为固定逻辑 const _checkScreenValidity = () => { // 实际校验逻辑 }; const _buildEvent = (eventType: string, props: Record) => ({ type: eventType, timestamp: Date.now(), ...props, }); const publishCdmEvent = (event: any) => { console.log('Published:', event); // 替换为实际埋点 SDK 调用 }; // ✅ 单一核心函数：接收 eventType 动态决定行为 const fireEvent = useCallback( (eventType: string, props: Record = {}) => { _checkScreenValidity(); if (checkDone && done && !props.force) return; setDone(true); publishCdmEvent(_buildEvent(eventType, props)); }, [done, checkDone] ); return { fireEvent, // 可选：提供语义化别名（不重复逻辑，仅透传） fireScreenDisplayed: (props = {}) => fireEvent('ScreenDisplayed', props), fireScreenCompleted: (props = {}) => fireEvent('ScreenCompleted', props), // 注意：此处应为 'ScreenCompleted' 而非 'ScreenDisplayed' }; }; 在组件中使用时，既可直接调用带语义的别名，也可按需传入任意事件类型：
// MyComponent.tsx import { useAnalytics } from './useAnalytics'; const MyComponent = () => { const { fireScreenDisplayed, fireScreenCompleted } = useAnalytics(); useEffect(() => { fireScreenDisplayed({ screenName: 'StartScreen' }); }, []); const handleComplete = () => { fireScreenCompleted({ screenName: 'StartScreen', duration: 3200 }); }; return ; };方案二：初始化时注入上下文（适用于固定屏幕场景）
若每个 Hook 实例始终对应唯一屏幕（如 SCREENS.START），可在调用 useAnalytics(screen) 时预置 screenId 或 eventType：
const useAnalytics = (screenType: 'START' | 'COMPLETED') => { // ... 其他逻辑不变 const eventType = screenType === 'START' ? 'ScreenDisplayed' : 'ScreenCompleted'; const fireEvent = useCallback( (props = {}) => { _checkScreenValidity(); if (checkDone && done && !props.force) return; setDone(true); publishCdmEvent(_buildEvent(eventType, props)); }, [done, checkDone, eventType] ); return { fireEvent }; }; // 使用： const { fireEvent: fireStart } = useAnalytics('START'); const { fireEvent: fireComplete } = useAnalytics('COMPLETED');⚠️ 关键注意事项：
- 避免在 Hook 内部硬编码多个同构函数（如原问题中的双函数定义），这违反 DRY 原则且增加维护成本；
- useCallback 包裹确保函数引用稳定，防止不必要的子组件重渲染；
- 示例中 fireScreenCompleted 的 _buildEvent 参数已修正为 ‘ScreenCompleted’，避免埋点语义错误；
- 若 done 状态需跨多个事件共享，建议将其提升至全局状态（如 Context 或 Zustand），而非单个 Hook 实例内管理。
总结：消除重复的核心不是“合并函数名”，而是识别变化维度（这里是 eventType），并将其显式参数化。这样既保持代码简洁，又增强扩展性——未来新增 fireScreenExited 仅需一行调用，无需修改 Hook 内部逻辑。