如何學習一個新框架

Islam Muhammad 原做，受權 New Frontend 翻譯。

你必定有過這樣的經歷：在學習一個新框架的時候打開視頻網站或者搜索引擎尋找教程，而後在看了差很少三十多分鐘後忽然發出「咦，這跟我以前用過的那個差很少誒，我不用從頭學了」這樣的感慨。在這篇文章裏，我會向你介紹我學習前端框架的經歷，以及這些框架之間的類似性。

「組件」、「路由」、「狀態管理」……每當你學習一個新框架的時候，都會反反覆覆接觸到這些詞。下面我們就來看看它們究竟是什麼東西：

組件

• 提供複用性，是各大框架的核心。
• 多數現代框架都會使用 JSX 或 HTML 模版引擎。
• 全部框架都會提供「建立」、「渲染」、「銷燬」等生命週期鉤子，不只幫助你瞭解組件的運做方式，還容許你在相應事件發生時執行一些操做。

路由

• 多數現代框架都會提供在客戶端建立和管理路由的 API。

狀態管理

• 全部框架都自帶管理組件內部狀態的方法，它們不依賴外部庫和工具。
• 還有不少框架自帶組件間共享狀態的方案，好比 Angular 的服務、React 的 Context API。
• 有時候框架自帶的方案不足以知足需求，尤爲是狀態較多的時候。這種狀況下能夠考慮使用第三方狀態管理庫，好比 Redux。

瞭解了這些基本知識，下面我們來作幾個項目。

項目

想要真正瞭解一個東西的話，不能只看書或者看視頻，還要動手去實踐。下面介紹的這些項目幫助你在學習新框架的時候快速上手它的各項功能。

注：

• 下面這些項目的難度是遞增的，每一個項目都會用到前面的那個涵蓋的知識點。
• 項目的複雜度也是遞增的。

展現型應用（復刻一個網站）

一般用新框架作的第一個項目能夠是藉助一個已有的網站提供的公共 API 復刻這個網站。能夠作一個搜索框，在下拉列表裏顯示從 API 獲取到的數據，並根據必定的條件展現不一樣的內容（好比說，若是有圖片的話，就把圖片顯示出來）。

一些 API 的例子：

• GitHub API
• OMDb API
• Spotify Web API
• Wunderground API
• Reddit API

你將學會：

• 從客戶端經過 HTTP 訪問 API。
• 使用鍵盤事件監聽器。好比說，當用戶敲回車後從 API 讀取數據。
• 顯示一條數據或者一組數據。
• 經過插值來改變展現方式。
• 將數據以結構化的方式展示。
• 製做主從頁面：在結果中放一個連接，點擊後進入對應結果的詳情頁。
• 將數據從主頁面傳給從頁面。

用戶鑑權

上面的部分 API 須要用戶登陸後才能進行某些操做。在這一節，咱們試着作一個有登陸、註冊頁面的應用，而後在用戶登陸後把用戶重定向到我的主頁，同時防止未登陸用戶訪問只有登陸用戶才能訪問的頁面。

你將學會：

• 使用導航守衛：一些頁面只有登陸用戶才能夠看到。
• 藉助 JWT（JSON web token）來發送只有登陸用戶才能進行的請求。

CRUD（增刪改查）

這是最流行的一類前端應用。在這一節，你能夠選擇把數據存在本地，也能夠選擇用 Firebase 這樣的服務把數據存到雲端，還能夠把應用跟後端框架結合起來。

一些例子：

• 書籤應用。
• To-Do 應用。

你將學會：

• 檢查表單輸入，並在遇到非法值的時候顯示錯誤信息。
• 使用 PUT、DELETE、POST、GET 這些 HTTP 請求。
• 把應用跟後端框架結合到一塊兒。
• 爲後端框架添加鑑權的功能。

聊天應用

在前面幾個小節裏，全部日後端發的請求都是單向的，不須要在後端維持應用狀態。但這一節裏面，咱們會試着用雙向傳輸請求的 web socket 來作一個聊天應用。這就不能依靠發出請求後收到的結果來更新視圖了，而是要經過另外一種方式來管理客戶端的狀態。

你將學會：

• 使用 React 的 Redux、Angular 2+ 的 NgRx 以及 Vue.js 的 Vuex 來管理狀態，並將它們和你的應用結合到一塊兒。
• 讓你的應用監聽網絡狀態，並在收到新消息的時候通知用戶。

Photo by Reto Simonet on Unsplash