React Props传递：传整个对象还是仅组件所需属性？

我有一个React组件只需要部分值，但经常会向它传递完整对象，不管组件会不会用到所有属性。以下是两种实现方式：

方案一：传递完整Post对象给Title组件 #

即便Title组件并不需要comments属性，仍传递整个Post对象：

type Post = {
  title: string;
  comments: Comment[];
};

function Title({ post }: { post: Post }) {
  return <h1>{post.title}</h1>;
}

function Post(post: Post) {
  return (
    <div>
      {/* 传递完整Post对象 */}
      <Title post={post} />

      {/* .... */}
    </div>
  );
}

方案二：仅传递Title所需的title属性 #

只把组件实际需要的属性传进去：

type Post = {
  title: string;
  comments: Comment[];
};

function Title({ title }: { title: string}) {
  return <h1>{title}</h1>;
}

function Post(post: Post) {
  return (
    <div>
      {/* 仅传递title属性 */}
      <Title title={post.title} />

      {/* .... */}
    </div>
  );
}

两种方式的适用场景分析 #

优先选择「仅传递所需属性」的情况

• 组件解耦：Title组件不需要依赖Post对象的结构，只要title字段的类型不变，哪怕Post后续新增/删除其他属性，Title组件都不用修改。
• 避免不必要重渲染：如果Post对象包含大量数据（比如comments里有几百条评论），传递完整对象会导致只要Post引用变化（哪怕title没变），Title组件就可能触发重渲染——除非用React.memo做浅比较优化，否则会造成性能浪费。
• 可读性更强：从Title组件的props定义就能直接看到它依赖什么，维护时不用去组件内部找到底用了对象的哪些属性。

适合传递「完整对象」的场景

• 组件后续会扩展属性：如果确定Title组件之后需要用到Post的其他属性（比如发布时间、作者名），提前传完整对象可以减少后续修改props的工作量。
• 减少代码冗余：如果父组件要给多个子组件传递Post的多个属性，传递完整对象可以避免重复写post.title、post.author这类代码，让模板更简洁。
• 强依赖对象整体状态：如果组件需要监听整个Post对象的变化（比如根据对象的某个状态切换显示逻辑），传递完整对象会更方便。

总结 #

大多数场景下，优先选择仅传递组件实际需要的属性，这种方式更符合组件设计的单一职责原则，让组件更独立、更易维护。只有在明确知道后续会扩展属性，或者能显著简化代码的情况下，再考虑传递完整对象。

内容的提问来源于stack exchange，提问作者R.M. Reza