使用 React props 扩展运算符会显着减慢我的应用程序吗？答案

【问题标题】：Will using the React props spread operator significantly slow-up my application?使用 React props 扩展运算符会显着减慢我的应用程序吗？
【发布时间】：2016-12-16 21:04:33
【问题描述】：

当将 props 向下传递到 React 组件时，我目前正在这样做：

<MyComponent 
    {...this.props}
    foo=foo
    bar=bar
/>

foo 和 bar 是我知道 MyComponent 需要的道具。然而，在大多数情况下，MyComponent 内部也有组件需要来自更高组件的道具，因此我使用{...this.props} 运算符将它们向前传递。我应该这样做，还是应该准确列出MyComponent 的子组件需要的道具？

【问题讨论】：

标签： reactjs

【解决方案1】：

您应该使用 Flux、Redux 或 Mobx 之类的状态管理（我认为，根本没有使用过 Mobx）来解决在中间组件不需要它们的情况下通过多个级别传递道具的问题。

您应该只将完全需要的道具传递给孩子。我在 github 上阅读了一篇很棒的帖子，但找不到。

当您的应用程序增长时很难管理，这实际上是对 Es6 扩展语法运算符的滥用（即，它可以在短期内轻松传递 props，但从长远来看，您仍然遇到问题，您只是在掩盖它)。不确定它是否会减慢应用程序的速度，但如果道具发生了不必要的变化，它会再次重新渲染所有子组件。

例如，在使用 Redux 时，您可以将组件“连接”到全局状态（想想数据库），并将它们作为您想要的任何组件的 props 传递，并绕过必须将 props 转发给子组件的组件。

一开始很难学，但 1000% 值得。

【讨论】：

很好的建议并回答了一些关于我认为 Redux 可能会做什么的问题。

【解决方案2】：

你应该只传入需要的 props，或者实现一个只传入需要的 props 的容器组件。或者你可以在你的组件上实现shouldComponentUpdate。获得性能的最简单方法是只传递所需的道具。

【讨论】：