ReactJS：如何优化自上而下的渲染流程

Question

看一下Facebook的Flux TodoMVC示例（ https://github.com/facebook/flux/tree/master/examples/flux-todomvc/ ），让我想知道这种方法如何扩展。

在示例中，商店在新条目的模糊/输入按键上进行了更新，但是如果我们想在按键上更新现有条目，该怎么办？ 即，您在输入中键入内容，并且该内容将持久存储到商店中。

由于整个应用程序都需要存储区的内容（待办事项列表），因此将其设置为最高状态，只要存储区发生变化，都会将其重置。

这个比例如何？ 似乎在很可能什么都不做的情况下检查每个组件是否需要重新渲染似乎效率不高（您只是在编辑文本，而该项目是唯一需要更新的内容）。

对于真正的应用程序，这种方法是否可以使用？还是要有效地进行优化，是否需要考虑优化措施？

Answer 1

每个组件都有shouldComponentUpdate方法，该方法将运行以确定组件在收到新道具时是否实际上应该更新。 默认情况下，这仅返回true。

如果您在组件上很好地实现了该方法，那么所布局的体系结构将非常有效，并且可以随着应用程序的增长而很好地扩展。

另请参阅：PureRenderMixin https://facebook.github.io/react/docs/pure-render-mixin.html