reactjs React App中多个子组件的Redux状态优化方法

6yoyoihd  于 2023-11-18  发布在  React
关注(0)|答案(1)|浏览(100)

我正在开发一个使用Redux作为状态管理系统的React应用程序。在应用程序中,我有一个父组件,其中包含同一个子组件的多个示例。
现在,我面临着如何在所有子组件中有效地访问相同的Redux状态的决定。我确定了两种可能的方法:

直接访问:将Redux状态独立于每个子组件进行访问,导致多次访问状态。
间接访问:在父组件中重命名Redux状态,并将值传递给所有子组件,以确保状态只读一次。

考虑到性能影响,什么是更优的方法?是否有任何最佳实践或注意事项可以帮助我在性能和可维护性方面做出明智的决定?

lyr7nygr

lyr7nygr1#

Redux风格指南强烈建议直接访问:

连接更多组件从存储读取数据

更喜欢让更多的UI组件订阅Redux store,并以更细的粒度阅读数据。这通常会带来更好的UI性能,因为当给定的状态更改时,需要渲染的组件更少。
例如,与其只是连接一个组件并阅读整个用户数组,还不如检索所有用户ID的列表,将列表项呈现为,并已连接并从存储中提取自己的用户条目。
这同时适用于React-Redux connect()API和useMap()钩子。
建议这样做,因为当连接父元件以提供子元件的数据时,当状态更改时,将导致更多工作。

相关问题