本文介绍通过提取通用逻辑、参数化事件类型等方式，在自定义 hook 中消除 `firescreendisplayed` 和 `firescreencompleted` 等高度重复方法的冗余代码，实现高复用、易维护的分析事件触发机制。
在实际开发中，我们常会遇到多个业务方法仅在少数参数（如事件名、上下文标识）上存在差异，其余逻辑完全一致的情况。例如你提供的 useAnalytics Hook 中，fireScreenDisplayed 和 fireScreenCompleted 几乎完全相同，仅在构建事件时传入的类型字符串（'ScreenDisplayed'）有区别——但更关键的是，它们本应对应不同屏幕状态（如 SCREENS.START vs SCREENS.COMPLETED），而当前实现却未将该语义差异体现在事件数据中，导致逻辑与业务意图脱节。
✅ 正确解法不是简单地复用同一函数引用，而是将可变部分作为参数或配置项注入，使单一函数能精准表达不同语义：
✅ 推荐方案：参数化事件类型 + 屏幕上下文
首先，修改 useAnalytics，接收屏幕标识（如 screenId）并将其作为 _buildEvent 的上下文基础：
// useAnalytics.ts
import { useState, useCallback } from 'react';
const useAnalytics = (screenId: string) => {
const [done, setDone] = useState(false);
const checkDone = true; // 假设为固定策略，或由外部传入
const _checkScreenValidity = () => {
if (!screenId) throw new Error('screenId is required for analytics');
};
const _buildEvent = (eventType: string, props: Record<string, any> = {}) => ({
eventType,
screenId,
timestamp: Date.now(),
...props,
});
const publishCdmEvent = (event: any) => {
console.log('[Analytics]', event); // 替换为真实上报逻辑
};
// 核心：统一处理函数，接受 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, screenId]
);
return {
fireEvent,
// 可选：提供语义化别名（不重复逻辑，仅封装调用）
fireScreenDisplayed: useCallback(
(props = {}) => fireEvent('ScreenDisplayed', props),
[fireEvent]
),
fireScreenCompleted: useCallback(
(props = {}) => fireEvent('ScreenCompleted', props), // 注意：此处应为 ScreenCompleted，非 ScreenDisplayed
[fireEvent]
),
};
};? 使用方式（组件内）
// MyComponent.tsx
import { SCREENS } from './constants';
import { useAnalytics } from './useAnalytics';
export const StartScreen = () => {
const { fireScreenDisplayed, fireScreenCompleted } = useAnalytics(SCREENS.START);
const handleStart = () => {
fireScreenDisplayed(); // → { eventType: 'ScreenDisplayed', screenId: 'START' }
};
const handleFinish = () => {
fireScreenCompleted({ step: 'onboarding_complete' });
// → { eventType: 'ScreenCompleted', screenId: 'START', step: 'onboarding_complete' }
};
return (
<div>
<button onClick={handleStart}>显示启动页</button>
<button onClick={handleFinish}>完成启动流程</button>
</div>
);
};
// 同理，其他屏幕可复用：
export const CompleteScreen = () => {
const { fireScreenDisplayed } = useAnalytics(SCREENS.COMPLETED);
return <div onClick={() => fireScreenDisplayed()}>完成页</div>;
};⚠️ 关键注意事项
- 事件类型命名一致性：原代码中 fireScreenCompleted 却发送 'ScreenDisplayed' 是严重逻辑错误，务必修正为 'ScreenCompleted'，否则埋点数据将失真。
- 依赖数组完整性：useCallback 必须正确包含 screenId、done、checkDone 等所有闭包依赖，避免陈旧状态问题。
- force 参数设计合理：允许强制触发（绕过 done 校验）是良好实践，适用于重试、调试等场景。
- 避免过度抽象：若仅有两个方法且极少新增，直接导出 fireEvent 并在组件中调用 fireEvent('ScreenDisplayed') 已足够简洁；增加别名是为了提升可读性，而非必须。
✅ 总结
消除重复的核心在于：识别变化点（事件类型、屏幕 ID）、将其参数化或配置化，再通过单一函数承载全部逻辑。相比“复制粘贴+微调”，这种模式显著提升可维护性、降低 Bug 风险，并天然支持未来扩展（如新增 fireScreenExited）。记住：React Hooks 的本质是逻辑复用，而非函数复用——让数据驱动行为，而非让行为绑定数据。
