「前端架构」React和Vue -CTO的选择正确框架的指南( 四 ) 快速总结:为项目选择正确的

拍摄了两个快照来演示在以下时间的内存使用情况:

在执行任何操作之前加载页面
在表上执行5个添加10、5个添加1000和5个更新操作之后

研究结果如下:

文章插图
React性能和内存消耗性能:如图所示，当DOM更新越来越大，需要更新更多数据时， React的虚拟DOM似乎获得了回报。这就是大多数React出现的性能问题。 React在删除和添加1000指标上的性能最好。
内存消耗:React的初始内存占用与Angular非常相似。从初始状态8.3 MB的内存消耗到DOM操作之后15.1 MB的内存消耗，您可以看出响应DOM操作操作的计算开销相当大，但它们仍然可以。
Vue性能和内存消耗性能:在大多数情况下， Vue的性能与React一样好，比如添加10、更新和选择指标，很可能是这样，因为Vue还利用虚拟DOM来操作操作。
Vue在性能方面反应滞后的唯一区别是增加了1000个指标，这是因为DOM操作操作数量的增加。
内存消耗:Vue在初始状态时的内存占用是7.6 ，考虑到它是纯JavaScript语言，这比React和Angular都要好。然而，一旦执行了DOM操作，这个值就会增加到16.1 ，这比React和Angular都要大。
可扩展性——Reactjs vs Vue框架是否足够成熟，可以构建可伸缩的应用程序?
当谈到可伸缩性时，唯一重要的是您的解决方案如何处理请求的累积数量，以及在负载突然达到峰值时它的显著行为是什么。由于大多数基于JavaScript的web应用程序都是为大量用户设计的，因此评估您选择的解决方案是否具有可扩展性就变得非常有意义。话虽如此，让我们看看React和Vue是否满足可伸缩性预期。
React构建可伸缩的web应用程序React只是一个用于在页面上创建和呈现可重用组件的库——您仍然需要收集一堆其他库来将它们组合在一起(路由、HTTP请求等) 。
web应用程序中的可伸缩性问题主要归结为代码组织得有多好、技术债务的数量以及web应用程序如何作为一个整体进行架构设计。
根据我个人与数千个客户打交道的经验，我发现像Angular这样的框架绝对是可扩展的，因为开发人员从一开始就倾向于遵循这种设计模式。
不要误解我的意思，我喜欢React ，但是如果一个React应用程序从一开始就没有经过很好的考虑，它可能会很快失控(比如很多意大利面条式的代码) 。我曾经有一个客户为React编写了一个自定义类模块的特性，浏览他们的代码非常愉快。
也就是说， React仍然可以用于构建可伸缩的web应用程序，但只有在从一开始就考虑可伸缩性时才会考虑。
Vue用于构建可伸缩的web应用程序作为轻量级的JavaScript库， Vue只适合于较小的应用程序。它不适用于构建可伸缩的应用程序。
React vs Vue:应用程序大小框架适合轻量级还是重量级应用程序?
在为大型应用程序选择框架时，最重要的是一致性和架构决策制定。在大型应用程序中，明智地选择框架是至关重要的。否则，转换将是一个巨大的痛苦。
因此，让我们探讨一下React和Vue的框架大小以及它们的大小对您业务的软件开发项目的影响。
React框架/库的大小会对软件开发项目产生重大影响。 React大小约为100kb ，非常适合轻量级应用程序。此外， React还需要其他库对特定任务的支持，其中一个任务就是路由。它的小尺寸非常适合轻量级应用程序。
VueVue是其他框架和库中最小的。它的大小大约为80kb 。它甚至比反应还要小。 Vue非常适合开发轻量级应用程序。如果您需要一个小于Vue的库，那么您应该选择Preact 。
React vs Vue -在哪里使用什么?这些框架的顶级实用程序是什么?什么时候使用它们是正确的选择?
现在我们已经评估了几乎所有必要的因素，让我们探索您的项目的React和Vue的最重要用例。它将帮助你选择正确的一个，从而避免不必要的成本。
React
我认为React是构建静态网站的最佳选择。您所需要做的就是使用renderToStaticMarkup呈现组件，并将呈现的有效负载发送给客户机。
此外，选择React开发小而简单的应用程序可能并不过分，因为它是为大型web项目创建的。。尽管React需要大量样板代码来设置一个工作项目，但从长远来看，它的架构是值得的。
JSX提供了JavaScript的全部功能(如流控制)和高级IDE特性(如组件视图模板中的自动完成) 。
React vs Vue:对照表

文章插图