将组件封装为Hook并暴露组件与交互方法的技术疑问及指引

需求与现有实现 #

我希望将组件封装为Hook，对外暴露组件本身、组件状态及相关交互处理器，但不清楚该实现模式的注意事项，也没见过类似方案，求技术指引。我认为这个模式可行，以下是我的实现代码：

Hook实现代码 #

const useEmptyCartModal: useEmptyCartModalHook = ({
  testID,
  orderID,
}) => {
  const { t } = useTranslation()
  const [isEmptyCartModalOpen, setIsEmptyCartModalOpen] = useState(false)
  const router = useRouter()
  const navigateToShop = () => router.push(ShopRoutes.getShopUrl())
  const [abandonOrder, { loading: abandonOrderLoading, error: abandonOrderError }] = useAbandonOrderMutation()

  const handleOnCompleteEmptyCart = () => {
    setIsEmptyCartModalOpen(false)
    navigateToShop()
  }

  const handleEmptyCart = () => orderID && abandonOrder({
    variables: { input: { orderID } },
    onCompleted: handleOnCompleteEmptyCart,
  })

  const openEmptyCartModal = () => setIsEmptyCartModalOpen(true)

  const emptyCartModal = <EmptyCartModal
    isOpen={isEmptyCartModalOpen}
    setOpen={setIsEmptyCartModalOpen}
    submitting={abandonOrderLoading}
    testID={testID}
    onSubmitEmptyCart={handleEmptyCart}
  />

  const emptyCartError = abandonOrderError ? t(ComponentsCartDetailsI18n.MESSAGES_EMPTY_CART_ERROR_TEXT) : undefined

  return {
    emptyCartModal,
    emptyCartError,
    openEmptyCartModal,
  }
}

export { useEmptyCartModal as default }

组件调用示例 #

const { openEmptyCartModal, emptyCartModal, emptyCartError } = useEmptyCartModal({
    testID: getTestID('EmptyCartModal'),
    orderID: cart.id,
  })

该模式的关键注意事项 #

• 避免不必要的组件重渲染：当前每次Hook执行都会重新创建emptyCartModal元素，父组件重渲染时，即使状态无变化，Modal组件也会被强制重渲染。建议用useMemo包裹组件元素，传入所有依赖项：

  const emptyCartModal = useMemo(() => (
    <EmptyCartModal
      isOpen={isEmptyCartModalOpen}
      setOpen={setIsEmptyCartModalOpen}
      submitting={abandonOrderLoading}
      testID={testID}
      onSubmitEmptyCart={handleEmptyCart}
    />
  ), [isEmptyCartModalOpen, abandonOrderLoading, testID, handleEmptyCart])
  

• 明确职责边界：当前Hook混合了UI组件实例、状态管理和业务逻辑，后续维护时会增加耦合成本。建议拆分：Hook只负责状态和交互逻辑，UI组件单独导出，让调用者自行组装：

  // 拆分后的Hook
  const useEmptyCartLogic = ({ orderID }) => {
    const [isEmptyCartModalOpen, setIsEmptyCartModalOpen] = useState(false)
    // ... 其他状态和方法
    return { isEmptyCartModalOpen, setIsEmptyCartModalOpen, openEmptyCartModal, handleEmptyCart, abandonOrderLoading, emptyCartError }
  }
  
  // 调用处
  const { isEmptyCartModalOpen, setIsEmptyCartModalOpen, openEmptyCartModal, handleEmptyCart, abandonOrderLoading, emptyCartError } = useEmptyCartLogic({ orderID: cart.id })
  const emptyCartModal = <EmptyCartModal 
    isOpen={isEmptyCartModalOpen} 
    setOpen={setIsEmptyCartModalOpen} 
    submitting={abandonOrderLoading} 
    onSubmitEmptyCart={handleEmptyCart}
    testID={getTestID('EmptyCartModal')}
  />
  

• 补充状态控制的灵活性：当前只暴露了openEmptyCartModal，外部无法主动关闭Modal。如果有外部触发关闭的需求，需要暴露关闭方法或状态修改器：

  const closeEmptyCartModal = () => setIsEmptyCartModalOpen(false)
  // 或者直接暴露setIsEmptyCartModalOpen
  return {
    // ... 其他返回值
    closeEmptyCartModal,
    // 或者 setIsEmptyCartModalOpen
  }
  

• 完善错误处理逻辑：当前仅返回错误信息，但没有重置错误的方法，会导致错误状态残留。建议添加错误重置函数：

  const resetEmptyCartError = () => {
    // 如果useAbandonOrderMutation支持重置错误，调用对应方法；否则可以用本地状态包裹错误
    // 示例：如果mutation没有内置重置，可改用本地状态
    // const [error, setError] = useState(null)
    // 在abandonOrder的onError里setError，reset时setError(null)
  }
  

• 优化函数引用稳定性：handleEmptyCart、navigateToShop等函数每次Hook执行都会重新创建，可能导致子组件重渲染。用useCallback包裹这些函数，确保引用稳定：

  const navigateToShop = useCallback(() => router.push(ShopRoutes.getShopUrl()), [router])
  
  const handleOnCompleteEmptyCart = useCallback(() => {
    setIsEmptyCartModalOpen(false)
    navigateToShop()
  }, [navigateToShop])
  
  const handleEmptyCart = useCallback(() => orderID && abandonOrder({
    variables: { input: { orderID } },
    onCompleted: handleOnCompleteEmptyCart,
  }), [orderID, abandonOrder, handleOnCompleteEmptyCart])
  

• 确保TypeScript类型严谨性：明确useEmptyCartModalHook的类型定义，包括参数和返回值类型，尤其是返回的React元素类型，避免类型推断错误：

  type UseEmptyCartModalProps = {
    testID?: string;
    orderID?: string;
  }
  
  type UseEmptyCartModalReturn = {
    emptyCartModal: React.ReactElement;
    emptyCartError: string | undefined;
    openEmptyCartModal: () => void;
    // 如果添加了其他方法也要补充类型
  }
  
  const useEmptyCartModal: (props: UseEmptyCartModalProps) => UseEmptyCartModalReturn = ({
    testID,
    orderID,
  }) => {
    // ... 实现代码
  }
  

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