在React函数式组件中覆盖props是否为不良实践？

核心问题解答 #

你直接覆盖props的写法不算严格的不良实践，但存在顺序错误和参数修改的潜在问题，同时有更规范的实现方案。

你的写法存在的问题 #

1. 对象展开顺序错误：你当前的{ ...props, ...compPropsDefault }会让默认值覆盖传入的props，比如用户传y: 300会被默认的200覆盖，正确顺序应该是先展开默认值，再展开传入的props，这样传入的属性才能优先生效。
2. 直接修改函数参数：虽然JavaScript允许修改参数，但创建新变量接收合并结果更安全，避免后续代码复用原props时出现意外。

优化后的实现方案 #

方案1：对象合并+新变量（基础版） #

这是处理大量可选props最简洁的方式，同时避免参数修改：

interface CompProps {
  x: number;
  y?: number;
}

const compPropsDefault: CompProps = {
  x: 100,
  y: 200
};

function CompB(props: CompProps = {}) {
  // 先默认值，再传入props，确保传入的属性覆盖默认值
  const mergedProps = { ...compPropsDefault, ...props };
  console.log(mergedProps);
}

CompB({ x: 100 }); // 输出：{"x": 100, "y": 200}
CompB({ x: 100, y: 300 }); // 输出：{"x": 100, "y": 300}

注意将参数默认值设为{}，避免用户不传参数时props为undefined导致展开报错。

方案2：结合TypeScript的Required类型（类型严谨版） #

如果希望合并后的props类型自动变为必填（因为默认值补全了可选属性），可以用Required<CompProps>标注，让TypeScript知道所有属性都有值：

function CompB(props: CompProps = {}) {
  const mergedProps: Required<CompProps> = { ...compPropsDefault, ...props };
  // 此时mergedProps.y不会提示"可能为undefined"
  console.log(mergedProps.y);
}

方案3：使用React的defaultProps（兼容写法） #

React函数组件依然支持defaultProps，但官方更推荐前面的合并方式，写法如下：

function CompB(props: CompProps) {
  console.log(props);
}

// 绑定默认props
CompB.defaultProps = compPropsDefault;

CompB({ x: 100 }); // 输出：{"x": 100, "y": 200}

不过这种方式在TypeScript中需要额外处理类型推导，不如对象合并灵活。

总结 #

• 修正展开顺序后的对象合并是高效可行的方案，适合props较多的场景，比逐个解构赋值更简洁。
• 推荐使用新变量接收合并结果，避免直接修改函数参数。
• 对类型严谨性有要求时，结合Required类型可以获得更好的TypeScript体验。

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