本文介绍通过函数复用和参数化设计消除 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<string, any>) => ({
type: eventType,
timestamp: Date.now(),
...props,
});
const publishCdmEvent = (event: any) => {
console.log('Published:', event); // 替换为实际埋点 SDK 调用
};
// ✅ 单一核心函数：接收 eventType 动态决定行为
const fireEvent = useCallback(
(eventType: string, props: Record<string, any> = {}) => {
_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 <button onClick={handleComplete}>完成</button>;
};方案二：初始化时注入上下文（适用于固定屏幕场景）
若每个 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 内部逻辑。
