InfoQVue、React和Angular:该选择哪个框架?( 二 )


框架组件
框架的性能是由最有价值的部分——它的组件决定的 。 它们的工作流与接收输入数据的方式以及对数据的响应方式有关 。
【InfoQVue、React和Angular:该选择哪个框架?】Angular
Angular 的组件命名为 directive(指令),它们是由 Angular 跟踪的 DOM 元素上的标记 。 A ngular 将组件的 UI 部分作为 HTML 标签的属性, 并将 UI 和 组件的 行为以 JavaScript 代码的形式分离开来 。
React
与 Angular 相反 , React 结合了 UI 和组件的行为 。 简单地说 , 同一部分 代码 负责 UI 元素的创建并控制其行为 。
Vue.js
在 Vue.js 中 , UI 和行为是组件的一部分 。 该框架也是高度可定制的 , 允许在脚本中结合 UI 和组件行为 。
性能和框架大小
Angular
Angular 使用真实 DOM , 因此它最适合用于内容不时更新的单页应用程序 。 这会使更新过程变得非常缓慢 , 并且在丢失流的情况下 , 将需要花费很长时间才能找出问题所在 。 值得庆幸的是 , 双向数据绑定过程将模型中所做的所有更改都以一种安全高效的方式复制到视图中 。 由于可用的特性范围很广 , 与 Vue 和 React 相比 , 应用程序要“重”得多(约 500KB) , 这会稍微降低性能 。
React
与 Angular 相反 , React 使用了虚拟 DOM , 增强了需要定期 更新 内容的所有应用程序 (不论大小) 的性能 。 单向数据可以更好地控制项目 。 缺点可能是开发人员需要不断升级他们的技能 , 以适应 React 不断发展的特性 。 由于 React 没有提供 大量 的库 , 所以 , 它的大小比 Angular 要小得多( 只有 约 100KB) 。
Vue.js
Vue 也使用虚拟 DOM , 因此在项目中的更改不会正式对 DOM 产生影响 。 Vue 在这三者中 , 大小最小(大约 80KB) , 这大大提高了它的性能 。
总之 , 考虑到性能 , Vue 和 React 在开发易于维护和无 Bug 的 Web 应用程序更加方便 。
对于正在考虑学习 新框架 的人来说 , 掌握一个新框架的过程 是否足够简单 非常重要 。 那么 , 在它们三个中 , 哪一个最适合学习呢?
学习曲线
Vue.js 可能是最容易学的,这主要有两个原因:
它不需要特殊的设置 。 首先 , 你只需将 Vue 库导入到 HTML 文件中 , 并添加一些 JS(对于较大的 Vue 项目)即可 。
无需学习大型特殊语法 。 Vue 的用法基于 JavaScript 和 HTML , 通过 v-for 之类的指令进行了增强 , 这些指令都很容易解释 。
Angular 和 React 都需要更为复杂的项目设置 。 不过 , 安装设置的可用性简化了这项任务:create-react-app、 Angular CLI 和Vue CLI(用于更复杂的项目) 。
要掌握 Angular 和 React , 还需要学习相应的 TypeScript 或 JSX 语法 。
其中, Angular 的学习曲线被认为比 React 要陡峭得多 。 Angular 是一个不断发展的复杂框架 , 为解决单个问题提供了多种选择 。
React 也需要 开发者持续学习, 因为它经常更新 , 但若有初学者教程和基本的 JavaScript 知识 , 学习起来就会容易 得多。 主要困难在于 Redux 库 。
应用案例
Angular
Angular 由 Google 开发 , 并在其 AdWords 应用程序中 大量 使用 , 以最大限度地提高性能 。 其他使用 Angular 的著名网站 , 我们可以列举如下:Guardian、Lego、Nike、PayPal 和 Weather.com 。
React
React 最初是为 Facebook 设计的 , 现在仍被该公司积极用于创建各种产品, 包括 Twitter、Instagram、Whatapp 和 WordPress 都 采用了这个框架 。
Vue.js
与 Angular 和 React 不同 , Vue 并没有强大的客户在其每个产品中实现它 。 不过 , 值得庆幸的是它的灵活性 。 它已经在这些流行品牌中得到了普及:9Gag、Nintendo、GitLab 和 Grammarly 等 。