您當前位置: 南順網絡>> 官方資訊>> 行業動態

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

現在前端界有三大框架橫行,Vue,React,Angular,幾乎是所有身為一名前端工程師所必備的一項技能。

但是我不知道有多少人仔細思考過為什么會這樣?

現在的一些應屆生和剛入行的人們,在剛一踏入前端這個行業起就會面臨著是學習Vue還是學習React又或者是學習Angular等這樣的選擇問題。

事實上在早幾年是沒有這個問題的,我們不需要選擇,那時候我們寫前端就是jQuery一把梭,就是干,干就完了。

那為什么現在人們需要選擇各種框架了呢?


其實之所以現在我們需要選擇框架,本質上是因為我們面臨的需求變了。大家肯定都明白如果我們只寫一個純展示信息的頁面,沒有任何交互功能的頁面,其實即便是現在,我們也是不需要選擇框架的,我們只需要寫幾行CSS和HTML就可以完成任務。

所以是因為我們面臨的需求變得復雜了,我們的應用經常需要在運行時做一些交互。

這里面有三個很重要的字我標了粗體,叫做運行時(Runtime)?,F代的前端開發,我們開發的應用經常需要在運行時來做一些交互,這些交互在早期只是個幻燈片或者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,因為框架會幫我們自動去做,我們只關注狀態就好了。





編輯:--ns868