前端框架Angular与react对比

最新推荐文章于 2024-12-18 07:44:07 发布

原创最新推荐文章于 2024-12-18 07:44:07 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文对比了Angular和React两种前端框架。Angular以其组件、模块和路由为核心，但较为复杂，适合大型项目；React则以其高性能、组件化、可预测性和单向数据流著称，上手更易，适合灵活搭配各类库。Angular提供完整解决方案，React灵活性更高，入门难度不同，项目规模和团队协作需求是选择的关键因素。

本文主要讨论两种框架在应用上的特点对比。

Angular

Angular 是基于 TypeScript 的 Javascript 框架。提到Angular，就不得不提它的前身AngularJS。AngularJS是Google发布的第一个MVVM框架，带来了许多新特性，为前端开发提供了很多新的思路，线上直到现在还有许多大型产品在用AngularJS。由于AngularJS 的诸多缺点，2016年Google又提出了Angular。可以说AngularJS和Angular是完成类似功能的但是互相独立的两种产品，可以把Angular看作是AngularJS的一种改进。

Angular框架的核心理念是组件、模块、路由。组件指的是各种类型的UI组件，在新版本Angular里采用了不可变数据类型，帮助执行脏检查机制。Angular2-dependencies-graph是一个node.js的模块，通过它把项目的目录和结构生成图表，就可以清晰地知道自己写的模块位于项目的哪个位置。模块是用来组织业务代码的利器。把应用切分成多个模块，当用户进入index页面的时候，只加载其中的bundle-0.js，当用户点到对应模块的时候再加载其它的代码。Angular新版本中静态路由只要写component属性，说明这个路由需要交给哪个component来处理，Angular就会自动创建这个component并渲染出来。

Augular是一个相当成熟和庞大的框架，这也使得它有时过于冗杂。

React

React由Facebook开发，Facebook认为MVC无法满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动

React具有以下特点

高性能
传统web页面操作DOM涉及重绘重排相当耗性能
React 提供了一种不同而又强大的方式来更新Dom（轻量级虚拟Dom——Virtual Dom），代替直接操作DOM，更新virtual dom时不一定马上影响真实Dom，React会等到事件循环结束，利用Diff算法，通过当前新Dom表述与之前做比较，计算出最小步骤来更新真实Dom
组件化
Dom树上的节点称为元素，而虚拟Dom 的节点称作组件（可复用性）
（组件的特点下面还会谈到）
可预测性
state属性包含定义组件所需要的一些数据，当数据发生变化时，将会调用render重现渲染，React 把组件看成是一个状态机（State Machines），通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致
单向数据流
数据从父节点传递到子节点，只需要从父节点获取props渲染即可

对比

Angular 是一个框架而不是一个库，因为它提供了关于如何构建应用程序的强有力的约束，并且还提供了更多开箱即用的功能。Angular功能齐全，不需要研究库，路由解决方案或类似的东西。React很灵活，可以和各种包搭配。这导致了在团队开发过程中，需要自行制定很多规则和进行相应的指导，否则将会影响项目的开发进程。

对于入门而言，Angular是最难入门的，因为它过于庞大。而react这种轻型框架使得它更容易上手。

同时，Angular将各种工具绑定在一起，尽管不能灵活的使用各种包，也避免了像react一样，在使用过程中有可能会用到一些快速更新的包，而这会给项目带来成本。不过，对于一个小型项目来说，这些成本并不大。