如何重构同时返回数值、函数与组件的React自定义Hook？

不算严重反模式，它的设计初衷是合理的：将高度关联的状态、方法和绑定了这些值的组件内聚在同一个Hook中，减少重复的props透传，降低上层组件的编码成本。但它确实存在几个值得注意的弊端：

• 组件复用性受限：Component1和Component2被硬编码在Hook返回值中，无法脱离当前Hook在其他场景独立使用
• 调试难度提升：React DevTools中无法直观看到组件的创建链路，问题溯源成本更高
• 灵活性不足：如果需要给组件传递额外的自定义props（如className、自定义事件回调），需要修改Hook本身的实现，不符合开闭原则
• 隐藏了组件渲染逻辑：上层组件不知道返回的组件到底依赖了哪些值，后续做性能优化时更容易踩坑

如果想避免手动传递大量props，同时保留方案的灵活性和可维护性，最推荐的是局部Context+组件组合的方案：

// 1. 定义局部Context存储Hook返回的状态和方法
import { createContext, useContext } from 'react'

const CustomFeatureCtx = createContext(null)

// 2. 封装Provider组件，内置自定义Hook逻辑
const CustomFeature = ({ children, dep1, dep2, ...deps }) => {
  // 原有自定义Hook的逻辑直接写在这里，或者引入外部Hook
  const hookValues = useCustomHook({ dep1, dep2, ...deps })
  return (
    <CustomFeatureCtx.Provider value={hookValues}>
      {children}
    </CustomFeatureCtx.Provider>
  )
}

// 3. 封装绑定了Context的业务组件，内部自动消费所需值，无需外部传参
CustomFeature.Component1 = () => {
  const { val1, val2, val3, val6 } = useContext(CustomFeatureCtx)
  return val3 && <Component1 val1={val1} val2={val2} val3={val3} val6={val6} />
}

CustomFeature.Component2 = () => {
  const { val1, val5, func1, func5 } = useContext(CustomFeatureCtx)
  return val5 && <Component2 val1={val1} func1={func1} func5={func5} />
}

export default CustomFeature

上层使用时非常简洁，完全不需要手动传递props：

import CustomFeature from './CustomFeature'

const MyComponent = () => {
  return (
    <Stuff>
      <CustomFeature dep1={xxx} dep2={xxx}>
        <CustomFeature.Component1 />
        <CustomFeature.Component2 />
      </CustomFeature>
    </Stuff>
  )
}

该方案完全保留了方案1的简洁性，同时解决了它的所有弊端：组件可以单独导出复用，支持给组件扩展额外props，调试链路清晰，性能优化也更容易操作。

如果你确实不想引入Context，也可以对方案1做轻量优化：将返回固定元素改为返回渲染函数，支持传入额外参数：

const useCustomHook = ({ dep1, dep2, ...deps}) => {
  // 原有逻辑
  return {
    // 其他状态和方法
    renderComponent1: (extraProps = {}) => val3 && <Component1 val1={val1} val6={val6} {...extraProps} />,
    renderComponent2: (extraProps = {}) => val5 && <Component2 val1={val1} func1={func1} {...extraProps} />
  }
}

使用时可以灵活传入自定义props：

const MyComponent = () => {
  const { renderComponent1, renderComponent2 } = useCustomHook({ ...deps })
  return (
    <Stuff>
      {renderComponent1({ className: 'custom-class' })}
      {renderComponent2({ onSuccess: handleSuccess })}
    </Stuff>
  )
}

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