三大主流前端框架介绍及选型

在前端项目中，可以借助某些框架（如React、Vue、Angular等）来实现组件化开发，使代码更容易复用。此时，一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成，而是按照组件的思想将网页划分成一个个组件，如轮播图组件、列表组件、导航栏组件等。将这些组件拼装在一起，就形成一个完整的网页。

本章主要涉及的知识点有：

l React框架介绍

l Vue框架介绍

l Angular框架介绍

l 如何选型

2.1  React

React框架是目前流行的前端框架之一。许多公司的项目都由React框架进行构建和编写，尤其是外企或涉及全球团队合作的项目。本节先简单介绍React框架的基础知识和必须了解的一些知识点，使读者对React有一个基本的概念和认知。

React是由Facebook团队开发的一个开源框架，官方网站如图2.1所示。

图2.1  React官方网站

React是一个用于构建用户界面的JavaScript库。使用React框架时创建一系列的React组件（如缩略图、点赞按钮和视频等），然后将它们组合成一个页面、系统或应用程序。

React框架在开发项目时有一套流程和规范，无论你是自己工作还是与成千上万的其他开发人员合作，使用React都是一样的。它旨在让工程师可以无缝地组合由独立人员、团队或组织编写的组件。

React组件的本质是JavaScript函数。例如，下面是VideoList.js组件代码实例：

function VideoList({ videos, emptyHeading }) {const count = videos.length;let heading = emptyHeading;if (count > 0) {const noun = count > 1 ? 'Videos' : 'Video';
heading = count + ' ' + noun;}return (<section><h2>{heading}</h2>{videos.map(video =><Video key={video.id} video={video} />)}
</section>);
}

上面代码中return()中的这种标记语法称为JSX，它是React推广的JavaScript语法扩展。JSX看起来与HTML相似，对于写过HTML代码的前端工程师来说，写JSX组件非常容易，不需要记住很多特定标记，并且使用JSX标记写出的组件呈现逻辑清晰，这使得React组件易于创建、维护和删除。

React组件会接收数据并将这些数据和JSX模板编译后形成一段一段的JavaScript代码，这些JavaScript代码会将数据呈现到屏幕上。React框架可以向组件传递新的数据以响应交互，例如当用户通过表单输入内容时，React随后将更新屏幕以匹配新数据。

React是单向响应的数据流，采用单向数据绑定，即Model（数据）的更新会触发View（页面）的更新，而View的更新不会触发Model的更新，它们的作用是单向的。在 React 中，当用户操作View 层的按钮或表单输入等需要更新Modal时，必须通过相应的 Actions 来进行操作。

2.2  Vue

Vue在中国公司的项目开发中非常流行，因为它具有上手快、轻量化的特点，并且文档对国人更友好。一些小型的、逻辑简单的项目大多使用Vue框架构建。

Vue是尤雨溪开发的一款开源的、构建用户界面的渐进式框架。Vue的官方地址如图2.2所示。

Vue的模板语法基于HTML的模板语法，并有特定的一套规则，例如插值语法，包括文本插值、Attribute插值等；指令语法，包括绑定事件的内部指令v-bind、v-on、v-model等，以及自定义指令；修饰符，v-on:submit.prevent等。

图2.2  Vue官方网站

与React类似，在底层机制中，Vue会将模板编译成JavaScript代码。结合响应式系统，当应用状态变更时，Vue能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的DOM操作。

Vue支持单向数据绑定和双向数据绑定。

l 单向数据绑定时，使用v-bind属性绑定、v-on事件绑定或插值形式{{data}}。

l 双向数据绑定时，使用v-model指令，用户对View的更改会直接同步到Model。v-model本质是v-bind和v-on相组合的语法糖，是框架自动帮我们实现了更新事件。换句话说，我们完全可以采取单向绑定，自己实现类似的双向数据绑定。

2.3  Angular

Angular诞生于2009年，其出现的时间要早于React和Vue，它是一款来自谷歌的开源的Web前端框架，Angular的官方网站如图2.3所示。

图2.3  Angular官方网站

Angular的模板功能强大、丰富，并且还引入了Java的一些概念，是一款大而全的框架，更侧重于大型前端工程的构建，为开发人员屏蔽项目构建底层的细节提出了自己的一套解决方案。

使用Angular的难点是学习曲线比较陡峭，优点是由于使用了标准化的开发方式，后期能极大地提高开发生产力，提高开发效率。

AngularJS支持单向数据绑定和双向数据绑定。

l 单向数据绑定时，使用ng-bind指令或插值形式{{data}}。

l 双向数据绑定时，使用ng-model指令，用户对View的更改会直接同步到Model。

2.4  如何选型

框架选型由多个因素决定，例如项目的类型、项目的复杂程度以及项目组成员的技能掌握情况。

React适合多组件的应用程序，另外对于具有扩展和增长可能的项目，由于React组件具有声明性，因此它可以轻松处理此类复杂结构。

Vue由于具有可接受且快速的学习曲线，因此最适合解决短期的小型项目，例如，业务逻辑简单、不需要处理复杂数据结构的项目。

Angular 最适合大型和高级项目，用于创建有着复杂基础架构的大型企业应用程序。

本文节选自《React.js+Node.js+MongoDB企业级全栈开发实践》，获出版社和作者授权共享。