React渲染逻辑：传入组件作为props还是回调函数？

当组件需要渲染大量元素，同时要支持自定义渲染逻辑（方便多处复用）时——比如日历组件的事件渲染逻辑需要通过props控制——目前有两种常见实现方式，以下是二者的优劣对比及适用场景：

方案1：传入渲染回调函数 #

代码示例 #

type MainProps = {
  renderStuff: (stuff: number) => React.ReactNode;
};

function MainComponent(props: MainProps){
  const matchingStuff = [1, 2, 3];

  return (
    <ul>
      {matchingStuff.map(stuff => <li>{props.renderStuff(stuff)}</li>)}
    </ul>
  );
}

优点 #

• 灵活性高：回调内部可以直接访问父组件的状态、变量，无需额外通过props传递，适合依赖父上下文的简单渲染场景。
• 写法简洁：不需要额外定义组件和Props类型，快速实现轻量自定义渲染逻辑。

缺点 #

• 类型约束弱：如果类型定义不严谨（比如原示例中返回void是错误写法），容易出现JSX语法错误，类型检查不够严格。
• 维护性差：渲染逻辑复杂时，回调会变得臃肿，难以拆分和维护，不符合组件化的代码组织方式。
• 性能优化难：回调函数每次渲染都会重新创建，除非用useCallback包裹，否则容易触发子元素不必要的重渲染，且无法直接使用React.memo这类组件优化手段。

方案2：传入组件作为Props #

代码示例 #

type StuffProps = {
  stuff: number;
};

type MainProps = {
  renderStuff: React.FC<StuffProps>;
};

function MainComponent(props: MainProps){
  const matchingStuff = [1, 2, 3];

  return (
    <ul>
      {matchingStuff.map(stuff => <props.renderStuff stuff={stuff} />)}
    </ul>
  );
}

// 自定义渲染组件示例
function Stuff(props: StuffProps){
  return <li>{props.stuff}</li>;
}

优点 #

• 类型严谨：基于明确的Props类型定义，TypeScript能提供完整的类型检查，减少语法和逻辑错误。
• 可维护性强：渲染逻辑封装在独立组件中，便于拆分、复用和单独维护，符合React组件化的设计思想。
• 性能优化友好：可以通过React.memo包裹自定义组件，结合useCallback等手段，有效减少不必要的重渲染，适合大量元素渲染的场景。

缺点 #

• 写法稍繁琐：需要额外定义组件的Props类型，对于简单渲染场景来说有一定冗余。
• 上下文访问受限：组件内部无法直接访问父组件的状态，必须通过Props传递，增加了一层参数传递的开销。

适用场景总结 #

• 方案1适合：渲染逻辑简单（比如仅渲染文本/基础元素）、需要直接依赖父组件上下文的场景，快速实现轻量自定义渲染。
• 方案2适合：渲染逻辑复杂、需要单独维护/复用，或者对性能有要求的场景（比如日历事件、带交互的列表项组件），更符合React的工程化实践。

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