談，前端框架的『御劍之道』

你在使劍，是的，可是你的目的是殺人，直追你的目標，忘記手中長劍，才能使出最高的劍法... 而這世上又有多少劍客， 拘泥於手中快劍而落入俗套，終究沒法到達登峯造極的境界... ----阿萊克西斯

劍，是劍客的武器，而現代前端工程師的劍能夠理解爲前端框架(固然不止是前端框架，但今天咱們只談前端框架)。

所謂御劍之道，指的是如何駕馭全部前端框架。對，你沒有看錯，是全部，而不是某一個。

若是是介紹如何駕馭某一個框架，那麼本文的標題可能就要改爲「御劍之術」，但本文介紹的是「御劍之道」。

現代前端程序員剛一入行就要選擇一款前端框架來做爲本身的技術棧，好比Vue，React，Angular等。包括各類公司的招聘信息上也會寫上本身但願應聘者掌握至少一種前端框架。因此不少人就會有一種困惑：我應該選擇哪款框架做爲個人技術棧？

圖片來自 @jwcarrol

若是你存在下面這些困惑，那麼本篇文章會幫助到你：

1. 你是初學者，不知道應該學習哪款框架來入門。
2. 你是有經驗的程序員，對於不斷出現的新東西感到困惑，不知道應該「投資」哪一種技術。
3. 剛學會一個新東西，而後就發現過期了。累覺不愛，求別更新老子學不動了。
4. 你的團隊爲使用哪一個框架而爭論不休，甚至發生宗教鬥爭。

我本人對Vue是最熟的，熟悉到什麼程度呢？幾個月前我就已經寫完了一本介紹Vue原理的書（《深刻淺出Vue.js》）還沒上市，但我並不以爲本身是Vue陣營的人。我以爲本身是無陣營的，或者換一種角度來說，「框架並非個人劍」。

這本書是與人民郵電出版社簽約的，預計過不了多久就會和你們見面了。

對於這本書的內容質量你們儘管放心。人民郵電出版社出版的書，質量都不會差。就算你們不相信我，也要相信出版社。

對於初學者來講，開局可以掌握一把絕世好劍，當然會在前期獲得很大的幫助，一招練成，出手就能傷人。但也正是這把劍，若是不能在合適的階段把它丟掉，那麼它會限制本身沒法到達登峯造極的境界。

獨孤求敗被稱爲『劍魔』，而他最終的境界是無劍。

《天龍八部》中描述段譽無形有質的六脈神劍時，曾寫道：「使劍全仗手腕靈活，但出劍收劍，不論如何迅速，老是有數尺的距離，他以食指運那無形劍氣，卻不過是手指在數寸範圍內轉動，一點一戳，何等方便？（沒錯，前端工程師的劍也是一樣的道理）

1. 重視框架特性，而不是框架語法

不少人在學習前端框架時，會進入到一個誤區，這個誤區是太過在乎框架提供的語法（API）。而且喜歡對各類框架孰優孰劣要爭論個高低。

在實際工做中我歷來不和人爭論這些，但有一次和朋友們聊天恰好聊到這個話題，我說全部框架都同樣用，只不過語法有點區別。其中一個朋友可能並無理解我這句話的意思，而後發了一篇文章說Vue和React在設計理念上是有一些區別的，不僅是語法。

設計理念不一樣致使提供的語法不一樣，但再怎麼不一樣，差別再怎麼大，它們要解決的問題是相同的。如今這些框架其實沒有什麼React能作到的事換成Vue就作不了。反而是React能作的事，使用Vue都能作，反之亦然。那麼對於我來講，這兩把劍就是同樣的，只是使用起來手感不太同樣。仍是那句話，要直追咱們的目標，不要拘泥於手中的劍。

站在「術」的角度看，它們確實不同，並且能夠說幾乎沒有同樣地方。可是站在道的角度看，它們是同樣的。

因此你會發現，我關注的根本就不是框架提供的語法，我關注的是框架的特性。我說的框架特性，指的不是React提供了JSX，或者Vue提供了模板語法。這些不是我所說的特性，這些其實仍是語法。

那麼框架的特性到底指的是什麼呢？咱們舉兩個例子來感覺一下。

1.1 聲明式 & 數據驅動渲染

更深一步思考，React提供的JSX和Vue提供的模板，它們的目的是什麼？目的是爲了實現聲明式渲染的功能。不管是JSX，或者是Vue中的模板，本質上都是描述了『狀態』與『視圖』之間的映射關係。

因此聲明式渲染是框架的特性。

聲明瞭映射關係以後，能夠獲得一個公式：

UI = render(state)

狀態與視圖之間的映射關係，等同於render函數。熟悉React的同窗對這個公式應該並不陌生。JSX與Vue的模板在這一點上是相同的。在框架的內部，不管是JSX仍是Vue的模板，最終會編譯成render函數。

上面這個公式，輸入的是state，輸出的是DOM。因此輸入變了輸出就變了。

這個特性就是咱們常說的數據驅動視圖。

這裏會引出一個問題，框架必需要知道Web應用在運行時」狀態「是否發生了變化，而後才能使用前面提到的公式從新輸出一個新的UI。因此如何知道Web應用的狀態在運行時是否發生了變化這個問題是全部框架必須去解決的。

解決方案有不少種。不一樣框架，或者同一個框架的不一樣版本對這個問題的解決方案都不一樣，但相同的是均可以解決問題。關於這個問題如何解決，我在曾在個人文章、分享的PPT以及目前還未上市的書中都有詳細的介紹。這個問題不是本文所討論的重點，感興趣的同窗能夠點擊這裏瞭解更多信息。

不一樣的解決方案，致使的直接結果就是它所提供給用戶的上層語法或API徹底不同。

不一樣的永遠是語法，相同的永遠是特性。----Berwin

1.2 組件

現代主流框架都具有的一個特性是「組件」，它們都會以「組件」做爲一個基本的抽象單元。

可能不一樣的框架，它所提供的操控組件的方式不同，但概念上是類似的。

以前聽過一次尤雨溪的知乎Live，他將實際應用中的組件分爲四種類型並依次介紹了四種組件之間的區別：

• 展現型組件

  展現型組件是最直接也是最經常使用的組件，就是用數據渲染視圖，「數據進，DOM出」。

• 接入型組件

  接入型組件一般會跟接入數據的service層打交道。包含一些和服務器或數據源打交道的邏輯，而後接入型組件會將數據往下傳，傳給比較簡單的展現型組件。在React中這種類型的組件被稱爲「容器組件（container component）」。

• 交互型組件

  交互型組件典型的例子是對錶單組件的封裝和加強。大部分組件庫，像ElementUI都是以交互型組件爲主。這一類組件會有比較複雜的交互邏輯，可是它是一個很是通用的邏輯，因此它強調複用。

• 功能型組件

  功能型組件是比較抽象的組件。用Vue舉例，路由的<router-view>和Vue自帶的<transition>都屬於功能型組件。它自己不渲染任何內容，它是一個邏輯型的組件。它一般做爲一個擴展或一種抽象機制存在。

不一樣框架操控組件的方式可能不同，但使用組件的「心法」永遠是同樣的。這就是關注特性帶來的好處，你能夠切換到任意一個框架，使用組件或封裝組件時，老是上面列出的幾種類型。

掌握了「心法」的程序員在切換框架時，他的狀態一般是這樣的：我如今想寫一個交互型組件，這個框架都提供了哪些API？去翻翻文檔看一下。而後就能夠寫出一個很優雅的組件出來，哪怕剛使用這個框架纔不到一天。

若是沒有掌握「心法」，用了一個框架寫出的代碼很糟糕，那麼換了一個框架也不會寫出更好的代碼，甚至更糟糕。

絕頂劍法，不在於使用的是什麼劍，而是使劍的人。

1.3 其餘特性

前面詳細介紹了兩個特性給你們感覺下爲何要重視特性。框架的特性太多不能每個都詳細介紹，下面列出一些你們比較熟悉的通用特性：

• 路由
• 狀態和數據流管理
• CLI工具
• 同構/服務端渲染
• CSS 管理方案
• ...

1.5 小結

對於初學者不知道應該學哪一種框架的問題，其實大可沒必要這麼糾結，隨便選一個去學（固然是學特性），之後切換到其餘框架也是很輕鬆的事情。

有經驗的程序員也無需擔憂投資了一個框架，剛學會就過期了。框架雖然過期了，但內功心法卻深深地紮在你的腦殼裏。

爲團隊選擇技術棧所考慮的因素與人不同。就目前來看，各大主流框架所提供的能力與社區的繁榮程度並無明顯的差距，因此框架是否靠譜等問題基本上不須要考慮，更多要考慮的因素反而是：

1. 團隊大部分紅員的口味更傾向於哪一種。
2. 技術棧是否容易招人。
3. 團隊內是否存在該技術棧的專家。
4. 其餘因素。

當團隊肯定好了技術棧以後，最重要的是統一。一個團隊內部只存在一種技術棧並打磨出成熟的架構與工做流以後，會大幅提高團隊內的生產效率。

2. 本身動手實現框架特性

在學會了框架的特性以後，若想達到「無劍」的境界，那就須要具有實現這些特性的能力。只有具有了這樣的能力，你才能徹底理解一種「特性」，從而達到人劍合一的境界。不然這些特性對你來講是一個黑盒，你永遠不知道它內部發生了什麼，你就只是這把劍的使用者，沒法真正的駕馭它們。你會被框架的設計者牽着鼻子走，而後無奈地說一句：求別更新，老子學不動了。

注意，前面提到的是實現這些「特性」的能力，固然若是能實現一個完整的框架更好。但一個框架一般會有不少很繁瑣的東西會消耗掉不少精力，而那些東西其實並非很關鍵，就像咱們平時寫代碼同樣，老是有不少沒什麼技術含量的體力活。

舉例來講，真正能讓咱們徹底理解「聲明式 & 數據驅動渲染」這個特性的方式就是親自動手去實現它。固然，不一樣框架或者同一個框架的不一樣版本對這個特性的實現方式都不太同樣。但這都不要緊，當咱們親自動手用某一種方式實現它以後，咱們就能真正理解不一樣的實現方式之間各自有什麼取捨，只有親自動手實現了某個特性以後咱們才能知道不一樣的實現方式有哪些優點，爲了獲得它而付出的代價（捨棄的）是什麼。

對「聲明式 & 數據驅動渲染」這個特性的實現方式感興趣的同窗能夠看個人另外一篇文章《聊聊我對現代前端框架的認知》，在這篇文章中，有一個小節「現代前端框架對渲染的處理」對這個問題進行了相關的介紹。

3. 總結

本文說了這麼多，但其實只講了一個道理，就是要重視『特性』，而不是語法與API。

還有就是本文開頭的那句話，若是想達到登峯造極的境界，就不要過於專一手裏的劍。框架既是神兵利器，也是枷鎖。既賦予咱們力量，也束縛着咱們。

若想掙脫這個枷鎖，就要達到「手中無劍，心中有劍」的境界。

初學者最開始學武每每急於求成，學了一招出手就想傷人。但卻不知真正的高手不多殺人。

中前期學發，中後期學收，收發自如，神功乃成。