将整个状态从 redux 传递给组件有什么缺点吗？

Question

我在 Redux 和 React 中使用 ES6(?) 装饰器。在许多示例中，我看到人们明确指定哪些商店商品作为 props 传递。在某些示例中，我看到人们使用传播属性来传递所有内容，例如：

@connect((store) => {
  return {
    ...store
  }
})
export default class SomeComponent extends React.Component {
...

是否可以只对每个组件执行此操作，还是您应该挑选特定于该组件的道具？

Answer 1

是的，有。阅读组件实际使用的道具并不容易。此外，您未在组件中使用的道具可能会发生变化，并会触发不必要的重新渲染。

Answer 2

存在巨大的性能损失，因为在每个动作调度中，react-redux 都会运行每个连接组件的 mapStateToProps，然后浅比较旧 props 与新 props。如果有任何更改，包装的组件将重新呈现。基本上如果你传入整个商店，每个连接的组件都会在每个调度的动作上重新呈现。

Answer 3

我经历了 redux 开发的两种范例。

每个组件都获得所有动作和所有状态。
只有 container/parent/base 个页面获得所有 actions/state
- 只给 children 需要的东西

我发现了什么。是的，性能会受到影响，因为如果每个组件都有每个状态属性，想象一下你更改一个状态值 - 每个组件都会获得该更新 - 无论它是否需要它。持续更新。

All night you are woken up:


Imagine your dog wakes up at 3:30am every night to go outside to pee.
Imagine your neighbor wakes up at 4am for work.
Imagine your other neighbor wakes up at 4:30 am for work.
Imagine your family wakes up at 5:15 am for work.

And you need to get up at 6:00am work.

在所有这些场景中，您都会被唤醒。随着时间的推移，你的工作效率如何？你会感到疲倦、迟钝等...

现在，想象一下 - 您只能在需要时要求被叫醒吗？而不是所有那些与你无关的其他时间？

我就是这么想的。因此，让您的 child 组件只知道它们关心的事情。

所以，我通常有容器 page/parent - 什么都知道 - 并把它需要的东西传下来。

警告 - 我发现，在某些情况下，child 组件（无论出于何种原因）需要了解几乎所有内容。对我来说，将每一件事都向下传递到多个级别 - 也会影响你一路传递的那些 children...

parent ---> 
     child (just care about one thing) ---> 
         child (just care about one thing)---> 
            child (I want alot of stuff)

我不喜欢把所有这些东西都传给那些 children，尤其是那些 children 更高层的人不在乎的时候。所以，在那个最深的 child 中，我从一开始就给它一切——而不是传递任何东西给它。

这对性能有一点影响，我会采取措施使代码更简洁。

但总的来说，不要给每个组件提供一切。随着时间的推移和应用程序的增长，性能会产生巨大差异。

将整个状态从 redux 传递给组件有什么缺点吗？

Are there any disadvantages to just passing the entire state to components from redux?

reactjs

redux

react-redux

ecmascript-next