javascript - ReactJS:如何优化自上而下的渲染流程

标签 javascript reactjs scalability reactjs-flux

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

在示例中,商店在新条目的模糊/输入按键时更新,但如果我们想在按键时更新现有条目怎么办?即,您在输入中键入一些内容,并且该内容会保存到存储中。

商店的内容(待办事项列表)被设置为最高级别的状态,因为整个应用程序需要它,每当商店更改时都会重新设置。

这是如何扩展的?检查每个组件是否需要重新渲染似乎效率很低,而很可能什么都没有做(您只是编辑文本,而该项目是唯一需要更新的内容)。

这种方法是否可以用于真正的应用程序,或者是否需要记住一些优化才能有效地进行这种扩展?

enter image description here

最佳答案

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

如果您在组件上很好地实现了该方法,那么您布置的架构将非常高效,并且可以随着应用程序的增长而很好地扩展。

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

关于javascript - ReactJS:如何优化自上而下的渲染流程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30791293/

相关文章:

javascript - 将列表嵌入为字符串 javascript 的一部分

javascript - Angular 资源被误认为是 C# MVC Controller

Javascript - 使用相同参数创建多个对象

javascript - 为什么 onClick 不能在 React 中的自定义组件上工作?

javascript - 如何在 React 中为 styleguidist 渲染 .md 文件中的两个组件?

scalability - 将后台进程(celery)添加到 OpenShift 上的缩放应用程序

javascript - 多个 PhantomJS 实例挂起

javascript - 在 Controller 中使用 Angular 处理浏览器后退按钮

reactjs - 如何将 SVG 与 kotlin-react 结合使用

c# - 通过线程经济的可扩展性 : async operations vs. 线程池上的多线程生产者/消费者队列?