这绝对是一个有趣的测试案例。
如果您查看时间轴,您可以看到Angular已经完成了仅仅20ms的处理变更事件。剩余的时间用于布局和重绘。
React(使用生产版本,您的repo默认使用dev)大约需要59ms。同样,剩下的时间用于布局和重新绘制。
如果你看一下CPU火焰图,你可以看到Angular似乎做了很少的工作。
角度:
阵营:
React提供了一个非常好的优化钩子形式 shouldComponentUpdate 当一个组件的单个实例应该更新而其他组件应保持不变时,这一点尤其有用;这是我用的技术 这个演示 (在隐身窗口中尝试一下;我发现一些Chrome扩展程序会使布局/重绘时间更高一些 - 或者说,一旦列表为1000长度需要〜13毫秒添加/删除单个元素,更改大小/颜色元素需要〜1ms)。但是,当每个元素都需要更新时,它没有用。
shouldComponentUpdate
我的猜测是Angular在更改表中的大部分或全部元素时会更快,React在使用时更新精选条目非常精通 shouldComponentUpdate 。
我很惊讶没有人提到过 PureRenderMixin 。它实现了 shouldComponentUpdate 所以你不必担心它。
另外,我想知道是否React 性能工具 会变得有用吗?
看到Angular比React更快,我很惊讶 来自Ryan Florence的演讲 。
我们试图分析我们框架的一些属性,当然,这不是整个列表。下面是我们认为比较属性的综合和重要的表格。
让我们得到更多细节:
虽然Angular与React的区别很多,但它们可以做同样的事情,即构建客户端接口。两者都有自己的位置。对于那些喜欢Web开发的人来说,最重要的是创新的AngularJS HTML方法。
AngularJS确实是一个完整的框架,而不仅仅是一个库,如ReactJS,但ReactJS通过实现虚拟DOM具有比AngularJS更好的性能。我们认为,如果出现以下情况,您应该使用AngularJS:
但是,双向数据绑定通常被吹捧为使用AngularJS的优势,但由于它是通过系列摘要实现的,因此为某些函数和表达式添加过多的复杂性会导致 性能 你的申请。
在这种特殊情况下,您需要注意状态逐渐减少,DOM更新也是如此。你想要做的是创建一个Price组件,它将语言环境存储在自己的状态,并接收一个信号(即通道或通量)来改变语言环境,而不是一直向下发送语言环境。这个想法是你不需要更新整个Numbers组件,只需更新里面的价格。该组件可能如下所示:
var Price = React.createClass({ mixins: [ReactIntlMixin], componentDidMount: function() { subscribeToLocal(this.onLocaleChange); }, onLocaleChange: function(newLocales) { this.setState({locales: newLocales}); }, render: function() { return <span>this.formatNumber(this.props.number, this.state.locales, {style: 'currency', currency: 'USD'})</span> } });
在React组件中,一旦调用setState,它将立即触发render函数。 React会将此组件标记为脏,并将重新呈现此组件中的所有子元素。
由于Virtual DOM,它不会呈现整个Native DOM元素,因此它仍会创建其子ReactElements的新实例,这可能导致额外的Javascript内存成本。
要避免此问题,您需要在Component Class中实现的shouldComponentUpdate函数。它将在Render方法之前执行。如果您发现现在没有任何变化,例如在您的示例中,则更改state.locale。你绝对可以认为这个组件不需要更新。所以只返回false以防止渲染调用。
这是解决React性能问题的基础解决方案。尝试在Numbers组件中添加“shoudlComponentUpdate”以避免大量的
这是一个例子,其中所有正在改变的是一个数据输出。当所有正在改变的是绑定数据的显示时,Angular的双向数据绑定简单地提供更快的重新渲染并非不可能。
在任何情况下,React都不承诺其渲染速度比任何其他框架都快。它提供的功能是能够以非常有效的方式处理〜任意复杂的DOM更新,并提供各种生命周期方法(例如componentWillReceiveProps,componentDidUpdate,以及上述的shouldComponentUpdate),以便您可以对这些事件和控制如何以及是否应该发生。在这里,优化很少,因为您所做的只是更改2,000个文本显示。
编辑:为了澄清,React在执行更复杂的DOM操作时非常有用,因为它的虚拟DOM算法允许它选择更新DOM所需的最小DOM操作集。当需要发生的所有事情都是2000个文本更改的实例时,仍然需要做很多工作。