reactjs - 使用 React props spread 运算符会显着减慢我的应用程序速度吗？

Question

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

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

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

Answer 1

你应该使用像 Flux、Redux 或 Mobx 这样的状态管理(我认为，根本没有使用过 Mobx)来解决在多个级别传递 props 而不需要中间组件的问题。

您应该只将确切需要的 Prop 传递给 child 。我在 github 上读到了一篇关于此的精彩文章，但找不到。

当你的应用程序增长时，它很难管理，这实际上是对 Es6 扩展语法运算符的滥用(即，它使得短期内传递 props 变得很容易，但从长远来看，你仍然遇到问题，你只是掩盖它)。不确定它是否会减慢应用程序的速度，但如果 prop 更改，它会再次重新渲染所有子组件，这是不必要的。

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

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