在React组件实例化中使用展开运算符是否存在性能弊端？

这种简写写法确实存在一些微小的性能开销，但要不要在意完全取决于你的使用场景：

核心性能差异点 #

• 额外的对象创建与展开开销：每次组件渲染时，{ filters, setFilters }都会生成一个全新的临时对象，随后的展开操作（...）也会带来少量计算成本。而直接写filters={filters} setFilters={setFilters}不需要创建中间对象，React可以直接传递单个props，避免了这部分开销。
• 可能破坏React.memo的优化：如果FilterBar是用React.memo包裹的优化组件，这个每次都新创建的props对象会导致memo的浅比较失效——即使filters和setFilters本身没有变化，memo会因为props对象引用变化判定为需要重渲染，直接抵消掉memo的优化效果。

什么时候需要在意？ #

• 如果FilterBar是普通组件，且渲染频率不高（比如页面只渲染一次、或仅在少数操作时更新），这种写法的性能差异完全可以忽略，代码简洁性的收益远大于这点微小开销。
• 但如果FilterBar是高频渲染的组件（比如列表循环中的子组件、随用户输入实时更新的组件），或者已经用memo/shouldComponentUpdate做了渲染优化，那最好改用直接传递单个props的写法，避免不必要的重渲染。

兼顾简洁性与性能的小技巧 #

如果想保持简写的清爽，又想避免性能问题，可以用useMemo缓存这个props对象：

const filterProps = useMemo(() => ({ filters, setFilters }), [filters, setFilters]);
<FilterBar {...filterProps} />

这样只有当filters或setFilters的引用发生变化时，才会生成新的对象，不会触发memo组件的不必要重渲染。

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