React组件传参规范：传递完整对象还是拆分属性？

首先，咱们先拆解你关心的两个核心点：性能影响和可读性/可维护性，再结合你提到的「有两个接收大部分相同props的组件」这个场景给出具体建议。

一、性能：拆分props真的更高效吗？ #

你提到的「拆分props能让React更高效diff」这个想法有一定道理，但要分情况看：

• 如果你的timelineItem对象是稳定引用（比如来自父组件的props、useState的状态，或者用useMemo缓存过，不会每次渲染都创建新对象），那么传递整个对象和拆分单个属性的diff效率几乎没有差异——React会递归比较对象内部的属性，和直接比较单个属性的成本差不多。
• 但如果每次渲染都重新创建timelineItem对象（比如在render里写timelineItem={{ id, label, ... }}），那传递整个对象会导致组件因为引用变化而不必要重渲染，这种情况下拆分单个属性确实更优，因为单个属性的值没变的话，React不会触发重渲染。

不过解决这个问题的更好方式不是拆分props，而是让timelineItem的引用稳定，比如用useMemo缓存：

const stableTimelineItem = useMemo(() => ({ id, label, timestamp, type }), [id, label, timestamp, type]);
<TimelineItem timelineItem={stableTimelineItem} />

二、可读性与可维护性：哪种方式更适合你的场景？ #

这部分是关键，尤其是你有两个共享大部分props的组件（比如TimelineItem和分组组件）：

优先选择传递单个timelineItem对象的情况： #

• 组件职责明确，属性高度相关：你的TimelineItem组件就是用来展示这一组（id、label、timestamp、type）相关数据的，传递整个对象更符合「单一数据源」的思路，调用处代码更简洁：

  // 调用处很简洁
  <TimelineItem timelineItem={item} />
  <TimelineGroupItem timelineItem={item} />
  

• 属性扩展更方便：如果后续需要给TimelineItem新增属性（比如status、description），只要在timelineItem对象里添加，组件内部解构即可，所有调用处都不用修改，维护成本更低。
• 复用性更强：两个相似组件可以直接复用同一个timelineItem对象，不用重复传递一堆零散属性，减少代码冗余。

什么时候适合拆分单个属性？ #

• 组件只需要timelineItem中的部分属性，传递整个对象会显得冗余，或者组件还需要接收其他不相关的props，拆分后更清晰：

  // 比如组件只需要label和timestamp，同时还要接收自定义样式props
  <TimelineItem label={item.label} timestamp={item.timestamp} customStyle={style} />
  

三、兼顾两者的小技巧 #

如果你既想享受对象传递的简洁性，又不想在组件内部写太多解构代码，可以直接在组件参数里解构：

const TimelineItem = ({ timelineItem: { id, label, timestamp, type } }) => {
  return (
    <div className="timeline-item">
      <span>{label}</span>
      <time>{timestamp}</time>
      {/* ...其他渲染逻辑 */}
    </div>
  );
};

如果用TypeScript，还可以定义一个共享的类型，让两个组件的props保持一致：

interface TimelineItemData {
  id: string;
  label: string;
  timestamp: number;
  type: 'info' | 'warning' | 'error';
}

interface TimelineItemProps {
  timelineItem: TimelineItemData;
}

interface TimelineGroupItemProps {
  timelineItem: TimelineItemData;
  isGrouped: boolean;
}

总结建议 #

1. 对于你的场景（两个组件共享大部分Timeline相关props），优先选择传递单个timelineItem对象，能大幅提升代码的可维护性和复用性；
2. 性能方面，确保timelineItem的引用稳定即可，不用为了性能刻意拆分props；
3. 如果组件需要扩展其他不相关props，再考虑结合拆分单个属性的方式。

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