React函数组件避免代码重复：多数逻辑一致仅少量函数不同的解决方案

核心思路是将公共逻辑封装到可复用的公共单元（自定义Hook或基础组件）中，把需要差异化的部分作为可配置项传入，同时给自定义函数透传公共逻辑的上下文依赖，解决跨函数调用问题。

方案1：自定义Hook封装（推荐，纯逻辑复用场景） #

把所有通用逻辑、通用函数都抽离到自定义Hook中，仅对外暴露覆写入口，同时将内部通用函数作为参数传递给需要覆写的自定义函数，解决依赖调用问题。
代码示例：

// 抽离公共逻辑的自定义Hook
function usePageBase(props, overrides = {}) {
  // 通用函数f，所有组件共用无需修改
  const f = (x) => x + 1;
  // 优先使用传入的覆写函数g，默认使用通用实现，透传f作为上下文给自定义g
  const g = overrides.g ? overrides.g({ f }) : (x) => f(x) * 2;
  // 通用函数h，调用的g已经是处理后的最终版本（默认/自定义）
  const h = (x) => g(x) * x;

  return { h };
}

// BWPage 直接使用默认逻辑，无需额外配置
export default function BWPage(props) {
  const { h } = usePageBase(props);
  return <div>{h(props.input)}</div>
}

// ColorPage 仅覆写需要修改的g函数
export default function ColorPage(props) {
  const { h } = usePageBase(props, {
    // 接收透传的f上下文，直接调用即可
    g: ({ f }) => (x) => {
      props.setColor(f(x));
      return 4;
    }
  });
  return <div>{h(props.input)}</div>
}

方案2：基础组件组合（UI+逻辑都复用的场景） #

如果组件的UI结构也90%一致，仅部分逻辑或局部UI有差异，可以抽离公共基础组件，用组合注入的方式实现差异化定制，对应官方推荐的组合模式。
代码示例：

// 公共基础组件，封装所有通用UI和逻辑
function BasePage(props) {
  const f = (x) => x + 1;
  const g = props.g ? props.g({ f }) : (x) => f(x) * 2;
  const h = (x) => g(x) * x;

  // 公共UI直接写在基础组件内，需要定制的部分可以用render prop实现
  return (
    <div className="common-page-layout">
      {/* 其他通用UI省略 */}
      <div className="content">
        {props.renderContent ? props.renderContent({ h }) : h(props.input)}
      </div>
    </div>
  )
}

// 直接复用基础组件实现BWPage
export default function BWPage(props) {
  return <BasePage input={props.input} />
}

// 覆写g函数实现ColorPage
export default function ColorPage(props) {
  return (
    <BasePage
      input={props.input}
      g={({f}) => (x) => {
        props.setColor(f(x));
        return 4;
      }}
    />
  )
}

方案说明 #

• 彻底解决了你提到的两个痛点：覆写的g函数可以通过透传的上下文直接调用公共的f函数，公共的h函数也能正常调用处理后的g函数
• 无需重复编写90%的通用逻辑，仅需要针对差异部分做定制即可，实现效果和OOP的重写机制一致
• 符合React官方推荐的组合优于继承的设计原则，类型定义和后续维护成本都更低

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