8分钟为你详解React、Angular、Vue三大前端技术

【引言】

当前世界中，技术发展非常迅速并且变化迅速，开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架做个相对详尽的探究，目的是为了解开这些前端技术的面纱，看看各自的庐山真面目。

【React】

React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。

React可以作为开发单页或移动应用的基础。然而，React只关注向DOM渲染数据，因此创建React应用通常需要使用额外的库来进行状态管理和路由，Redux和React Router分别是这类库的例子。

基本用法

下面是一个简单的React在HTML中使用JSX和JavaScript的例子。

Greeter函数是一个React组件，它接受一个属性问候语。变量App是Greeter组件的一个实例，其中问候语属性被设置为 “Hello World！”。然后，ReactDOM.render方法将我们的Greeter组件渲染在DOM元素(id为 myReactApp)中。

在web浏览器中显示时，结果将是：

显著特点

组件化

React代码由称为组件的实体组成。组件可以使用React DOM库渲染到DOM中的一个特定元素。当渲染一个组件时，可以传入被称为 “props “的值。

React中声明组件的两种主要方式是通过功能函数组件和基于类的组件。

功能函数组件

功能组件是用一个函数声明，用来返回一些JSX。

类组件

基于类的组件是使用ES6类来声明的。它们也被称为 “有状态 “组件，因为它们的状态可以在整个组件中保持，并且可以通过props传递给子组件。

虚拟 DOM

另一个值得注意的特点是React使用了虚拟文档对象模型，也就是虚拟DOM。React创建了一个内存中的数据结构缓存，计算得出变化差异，只渲染实际变化的子组件, 从而高效地更新浏览器显示的DOM。

生命周期方法

生命周期方法是指在组件的生命周期内，允许在设定的点执行代码的hooks处理函数。

• shouldComponentUpdate允许开发者在不需要渲染的情况下，通过返回false来防止不必要的重新渲染组件。
• componentDidMount是在组件 “挂载 “后调用的(组件已经在用户界面中创建了，通常是通过将其与DOM节点关联起来)。这通常用于通过API从远程数据源触发数据加载。
• componentWillUnmount是在组件被拆解或 “解挂 “之前立即调用的。这通常用于清除组件的资源依赖关系，这些依赖关系不会随着组件的卸载而简单地被移除(例如，移除任何与组件相关的setInterval()实例，或者因为组件的存在而在 “文档 “上设置的 “eventListener”)。
• render是最重要的生命周期方法，也是任何组件中唯一必须存在的方法。它通常在每次更新组件的状态时都会被调用。

JSX

JSX，即JavaScript XML，是对JavaScript语言语法的扩展。JSX在外观上类似于HTML，它提供了一种开发者熟悉的语法结构化组件渲染的方法。React组件通常是使用JSX编写的，尽管不一定非要使用JSX(组件也可以用纯JavaScript编写)。JSX类似于Facebook为PHP创建的另一种名为XHP的扩展语法。

JSX代码的一个例子:

嵌套元素

同一层次上的多个元素需要被包裹在一个容器元素中，如上图中的<div>元素。

属性

JSX提供了一系列的元素属性，旨在对应HTML提供的属性。这些自定义的属性也可以传递给组件，所有的属性都会被组件作为props接收。

JavaScript表达式

JavaScript表达式(但不是语句)可以在JSX内部通过大括号{}使用。

上面代码的显示结果是：

条件语句

If-else语句不能在JSX中使用，但可以使用条件表达式来代替。下面的例子当i为1时将 { i === 1 ? ‘true’