您当前位置: 南顺网络>> 官方资讯>> 行业动态

前端三大框架解析,Angular、React、Vue

现在前端界有三大框架横行,Vue,React,Angular,几乎是所有身为一名前端工程师所必备的一项技能。

但是我不知道有多少人仔细思考过为什么会这样?

现在的一些应届生和刚入行的人们,在刚一踏入前端这个行业起就会面临着是学习Vue还是学习React又或者是学习Angular等这样的选择问题。

事实上在早几年是没有这个问题的,我们不需要选择,那时候我们写前端就是jQuery一把梭,就是干,干就完了。

那为什么现在人们需要选择各种框架了呢?


其实之所以现在我们需要选择框架,本质上是因为我们面临的需求变了。大家肯定都明白如果我们只写一个纯展示信息的页面,没有任何交互功能的页面,其实即便是现在,我们也是不需要选择框架的,我们只需要写几行CSS和HTML就可以完成任务。

所以是因为我们面临的需求变得复杂了,我们的应用经常需要在运行时做一些交互。

这里面有三个很重要的字我标了粗体,叫做运行时(Runtime)。现代的前端开发,我们开发的应用经常需要在运行时来做一些交互,这些交互在早期只是个幻灯片或者Tab切换下拉菜单等一些简单的交互,这些交互用jQuery实现完全没什么问题。但现代的前端我们的目标是用Web去PK原生应用,去和Native进行PK。

那这个时候我们会发现用jQuery来开发应用,我们的代码变得很难以维护,那为什么使用现代框架比如Vue,React等就变得容易维护了呢?

我们可以想一下,我们用jQuery去操作DOM的目的是什么?是为了局部更新视图,换句话说是为了局部重新渲染

jQuery是命令式的操作DOM,命令式的局部更新视图,而现代主流框架Vue,React,Angular等都是声明式的,声明式的局部更新视图。

为什么声明式的操作DOM就可以让应用变得好维护了呢?

弄明白这个问题首先我们先简单介绍下什么是命令式,什么是声明式。

命令式

声明式是通过描述状态与视图之间的映射关系,然后通过这样的一个映射关系来操作DOM,或者说具体点是用这样的映射关系来生成一个DOM节点插入到页面去。比如Vue中的模板。模板的作用就用是来描述状态与DOM的映射关系。

同样的场景,我们用Vue中的模板来实现,当我们用模板描述了映射关系之后,我们在点击按钮时,我们只需要对颜色这个变量进行修改就可以完成需求。

看到区别了么?

仔细思考下,用Vue来实现同样的需求,如果细分来看,我们在逻辑上只有一个行为,只有状态。而jQuery是两个行为,状态+DOM操作。

所以声明式为什么可以简化维护应用代码的复杂度?

因为它让我们可以把关注点只放在状态的维护上。这样一来当应用复杂后,其实我们的思维,我们管理代码的方式只在状态上,所有的DOM操作都不用关心了,可以说大大降低代码维护的复杂度。

我们不再需要关注怎么操作DOM,因为框架会帮我们自动去做,我们只关注状态就好了。





编辑:--汪锦