单向数据流:在处理大量项目时减轻返工?

时间:2016-12-11 14:57:05

标签: javascript reactjs redux flux re-frame

我理解如何使用它的单向数据流(Flux)似乎不适合特定的用例。我们有一个SPA,显示整个月的几百个日历条目的列表。每个条目总结了一些细节。

UI允许用户通过单击来展开条目以显示其他详细信息。这是在模型中的条目上切换expanded位的简单问题。

让我烦恼的部分是每个用户操作都需要整个视图模型的重新渲染,然后才能与DOM协调。因此,要在数百个触发器中的单个条目之间进行相当多的返工,重新生成数百个未进行任何更改的其他条目,以便适应更改。

必须有一种方法可以将更新消息传递到正确的邮箱,以避免不必要的返工。我知道React使用密钥来尝试优化视图模型与DOM协调的方式,但即使使用此优化,整个视图模型也可以在任何操作上完全重新生成。如果消息路由和DOM协调更好,我认为没有理由不能显示数千个项目的列表。

我正在努力解决这个问题。我的方法使用一种版本的memoization来缓存先前渲染中的视图模型。我有兴趣从其他人的创新中学习。

2 个答案:

答案 0 :(得分:1)

React-Redux库提供了connect函数,该函数生成处理订阅Redux商店的包装器组件。 connect实现了 lot 优化,以确保包装的组件仅在实际需要时重新呈现。您还可以使用一些特定模式来帮助优化重新渲染。主要的一个是将连接的列表组件传递给连接的子项,这些子项使用该ID查找自己的数据。最后,通常使用Reselect库创建的memoized“selector”函数也可以帮助减少重新渲染。

Redux PerformanceReact/Redux links list部分有关于此主题的一些文章,Redux FAQ question on "scaling Redux"也是如此。文章"High Performance Redux"特别有用,本周早些时候也有good performance benchmark comparing Redux vs MobX

答案 1 :(得分:0)

建议使用redux-saga解决问题。请参阅下面的链接

[redux sage] [1] https://shift.infinite.red/using-redux-saga-to-simplify-your-growing-react-native-codebase-2b8036f650de#.yz91g1rn2