将整个状态传递给redux的组件是否有任何缺点?

时间:2016-12-19 23:10:47

标签: reactjs redux react-redux ecmascript-next

我正在使用Redux和React的ES6(?)装饰器。在许多示例中,我看到人们明确地指定哪些商店项目作为道具传递。在一些例子中,我看到人们使用spread属性来传递所有内容,如:

settings

是否可以为每个组件执行此操作,或者您应该选择特定于该组件的道具?

3 个答案:

答案 0 :(得分:2)

对于每个动作调度,每个连接组件的mapStateToProps都会运行每个动作调度,然后将旧道具与新道具进行浅层比较,这会带来巨大的性能损失。如果有任何更改,则包装的组件将重新呈现。基本上,如果您传入整个商店,则每个连接的组件将在每次调度的操作上重新呈现。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我通过两种范围来进行redux开发。

  • 每个组件都获得所有操作,以及所有状态。
  • 只有容器/父/基页获取所有操作/状态
    • 只给孩子们所需要的东西

我找到了什么。是的,性能受到了影响,因为如果每个组件都具有每个状态属性,那么可以想象您更改了一个状态值 - 每个组件都获得该更新 - 无论是否需要它。不断更新。

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.

在所有这些场景中,你都被唤醒了。随着时间的推移,你将在工作中有效吗?你会感到疲倦,迟钝等...

现在,想象一下 - 当你需要的时候,你只能要求被唤醒?并非所有其他时间,与你无关?

这就是我的想法。因此,让您的孩子组件只知道他们关心的事情。

所以,我通常有容器页面/父母 - 了解所有内容 - 并提供所需内容。

警告 - 我发现,在某些情况下,子组件(无论出于何种原因)需要了解几乎所有内容。对我来说,将每一件事情都传递到多个层次 - 也会影响你沿途传递的那些孩子......

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

我不想将所有这些东西都传给那些孩子,特别是如果那些爬上梯子的孩子不在乎。所以,在那个最深的大多数孩子中,我从一开始就给予它一切 - 而不是传递任何东西。

这有点受到性能影响,我会采取更清晰的代码。

但总的来说,不要给每个组件一切。随着应用程序的增长,会在加班时产生巨大的性能差异。