如何利用React Hooks避免useAnalytics钩子中方法重复定义？

首先注意到你代码里的一处笔误：fireScreenCompleted方法中调用_buildEvent时传入的是'ScreenDisplayed'，这应该是'ScreenCompleted'，否则两个方法实际发送的是同一个事件，先修正这个问题。

针对重复代码的问题，有两种实用的优化方式，既能合并核心逻辑，又能满足组件调用的需求：

方案一：返回通用方法，调用时指定事件类型 #

把两个方法合并成一个通用方法，允许调用时传入事件类型，钩子内部只需维护一份逻辑：

// 修改后的useAnalytics钩子
const useAnalytics = (screenKey) => {
  // 保留原有的内部逻辑（_checkScreenValidity、checkDone、done、setDone、publishCdmEvent、_buildEvent等）
  
  // 通用的事件触发方法
  const fireScreenEvent = (eventType, props = {}) => {
    _checkScreenValidity()
    if (checkDone && done && !props.force) return
    setDone(true)
    publishCdmEvent(_buildEvent(eventType, props))
  }

  return { fireScreenEvent }
}

// 组件中调用
const { fireScreenEvent } = useAnalytics(SCREENS.START)
// 触发展示事件
fireScreenEvent('ScreenDisplayed')
// 触发完成事件
fireScreenEvent('ScreenCompleted')

方案二：根据初始化参数绑定事件类型，保持原有调用方式 #

如果你希望组件调用方式完全不变（依然使用fireScreenDisplayed或fireScreenCompleted），可以在钩子内部根据传入的SCREENS常量，动态绑定对应的事件类型，返回对应命名的方法：

// 修改后的useAnalytics钩子
const useAnalytics = (screenKey) => {
  // 保留原有的内部逻辑
  
  // 封装核心逻辑为内部函数
  const _fireScreenEvent = (eventType, props = {}) => {
    _checkScreenValidity()
    if (checkDone && done && !props.force) return
    setDone(true)
    publishCdmEvent(_buildEvent(eventType, props))
  }

  // 根据传入的screenKey返回对应方法
  if (screenKey === SCREENS.START) {
    return {
      fireScreenDisplayed: (props) => _fireScreenEvent('ScreenDisplayed', props)
    }
  } else if (screenKey === SCREENS.COMPLETED) {
    return {
      fireScreenCompleted: (props) => _fireScreenEvent('ScreenCompleted', props)
    }
  }
  // 可选：处理其他screenKey的默认情况
  return {}
}

// 组件调用方式完全不变
const { fireScreenDisplayed } = useAnalytics(SCREENS.START)
const { fireScreenCompleted } = useAnalytics(SCREENS.COMPLETED)

如果你的SCREENS常量和事件类型有固定映射关系，还可以用映射表简化逻辑：

// 定义常量与事件类型的映射表
const SCREEN_EVENT_MAP = {
  [SCREENS.START]: 'ScreenDisplayed',
  [SCREENS.COMPLETED]: 'ScreenCompleted'
}

const useAnalytics = (screenKey) => {
  // 保留原有的内部逻辑
  
  const _fireScreenEvent = (eventType, props = {}) => {
    _checkScreenValidity()
    if (checkDone && done && !props.force) return
    setDone(true)
    publishCdmEvent(_buildEvent(eventType, props))
  }

  const eventType = SCREEN_EVENT_MAP[screenKey]
  // 根据事件类型生成对应的方法名
  const methodName = eventType === 'ScreenDisplayed' ? 'fireScreenDisplayed' : 'fireScreenCompleted'

  return {
    [methodName]: (props) => _fireScreenEvent(eventType, props)
  }
}

这样钩子内部只需维护一份核心逻辑，避免代码重复，同时组件调用方式也能保持原有习惯。

内容的提问来源于stack exchange，提问作者Toquinhoro