假如你現在要自學 React/Vue 框架，怎么學？

絕大部分同學可能是這樣學的：

• 直接去看官方文檔，或者是找一些視頻看一遍，學會這個框架的一些基礎語法，特性功能等等
• 參考一些例子上手編寫 demo，簡單感受一下
• 然后就是在工作中使用框架，碰到各種問題的時候，上網查找解決方案或者詢問 AI
• 最后就是自己想要深入學習的時候，才會去鉆研學習它的原理

這樣學好像也沒什么問題，因為大家都是這么做的，包括我當初也是這樣自學的。

但是，這樣學有點像無頭蒼蠅，對于框架的應用經驗全靠摸爬滾打一路踩坑才得來的，成長速度非常慢。

作為過來人，我覺得應該讓你提前了解到：我們要學一個前端 UI 框架，應該要關注哪些內容。

這樣，可以提前有個概念，讓你帶著目標，查漏補缺地去學習，才能提升得更快。

如何操作 DOM 結構

首先要學的，是這個框架是如何操作 DOM 結構的。

現在流行的 UI 框架，主打的就是封裝原生 DOM 操作，讓我們可以不直接操作 DOM，只關注數據。

因此，我們更加需要了解，這個框架是怎樣操作 DOM 的。核心是這些點：

• 怎樣創建 DOM tree？如何把創建好的 DOM tree 掛載到 document 中？
• 怎樣更新 DOM tree？怎樣修改某個元素的內容？怎樣插入元素？怎樣移除元素？
• 怎樣讀取 DOM 元素？雖然 UI 框架給我們做了很好的封裝，但是在某些特殊場景中，我們還是要直接操作 DOM tree，框架是怎樣提供這個能力的？
• 怎樣刪除 DOM tree？如何把 DOM tree 從 document 中卸載？

如何操作樣式

然后就要學習如何操作樣式，CSS 是前端非常關鍵的一環。

框架把原生 DOM 封裝起來了，我們就不能用常規的方法操作 CSS 了。

因此，我們需要關注這些點：

• 如何給 DOM 元素添加樣式 class？如何讀取 DOM 元素的樣式 class？如何更新 DOM 元素的樣式 class？
• 如何給 DOM 元素添加 inline style？
• 如何讀取 DOM 元素的 CSS style？如何修改 DOM 元素的 CSS style？

如何處理事件

接下來要學習處理事件。主要是以下這些功能點:

• 如何給 DOM 元素綁定事件？
• 如何給 DOM 元素解綁事件？
• 是否遵循 DOM 事件標準？事件捕獲和事件冒泡都有嗎？
• 如何獲取事件對象？如何獲取原始的事件對象？
• 如何阻止冒泡？如何阻止默認行為？
• 是否支持自定義事件？

如何處理表單

接下來是處理表單。畢竟對于前端來說，處理表單是基礎能力。而涉及到表單的頁面，往往都是比較復雜的，因此更加需要學習 UI 框架是如何讓我們處理表單的。

對于處理表單，我們主要關注這些點：

• 如何設置原生表單元素的屬性？比如 value，disabled，placeholder 等等
• 如何設置/讀取不同表單元素的值？
• 如何監聽表單元素的值變化？
• 如何獲取表單的原生 DOM 元素？

如何實現組件化

前面都是 JavaScript 和 DOM 的必備功能，接下來我們需要重點學習組件化相關的內容。

現在流行的 UI 框架，主打的是組件化開發框架，這有利于我們組織復雜項目的代碼，讓代碼更好被維護和復用。

對于組件化，我們要了解這個框架是如何實現組件化的，主要關注這些點：

• 如何自定義組件？一個自定義組件的代碼如何組織？
• 如何創建組件？如何引入組件？
• 組件的生命周期是怎樣的？有哪些鉤子，它們的作用分別是什么？

如何實現組件通信

當我們利用組件化的思想去組織我們的代碼時，整個頁面的結構就是一個組件樹(component tree)，

這時，我們需要關注一個非常重要的話題 —— 組件通信。

組件化可以讓我們的代碼內聚在某個組件內部，但這些組件是不能完全獨立的，它們需要通過某些通信方式來協作，從而完成復雜的功能。

因此，我們需要學習這個框架是如何實現組件通信的，主要是以下這些點：

• 父 -> 子 的通信方式有哪些？各自的優缺點是什么、適用于什么場景？
• 子 -> 父 的通信方式有哪些？各自的優缺點是什么、適用于什么場景？
• 祖 -> 孫 的通信方式有哪些？各自的優缺點是什么、適用于什么場景？
• 孫 -> 祖 的通信方式有哪些？各自的優缺點是什么、適用于什么場景？
• 任意組件的通信方式有哪些？各自的優缺點是什么、適用于什么場景？

如何復用代碼

最后，我們還要探索一個話題，就是如何復用代碼。

組件化也是復用代碼的一種方式，它復用的是整個組件的代碼，這個組件可以用在很多地方，不需要重新寫一個新的組件。

除了這個之外，我們還需要學習更細粒度的復用代碼，比如如何復用某些邏輯，可以在多個組件中使用？

如果按照可被復用的代碼量級來劃分層級的話，我們有如下層級：

• 函數：某個函數的代碼可以在任何需要的地方被調用
• 功能邏輯：特定功能的邏輯代碼，可以被復用到各個組件，一般是多個函數的關聯集合，或者是一個基類
• 組件：某個組件可以在任何需要的地方被加載使用
• 模塊：整個業務功能模塊被復用到有需要的頁面中，通常是由多個組件組合而成
• 頁面：整個頁面被復用到站點的業務流程之中

在學習 UI 框架時，我們不僅要學習組件層級的代碼復用，還需要學習功能邏輯層級的代碼復用。

功能邏輯層級的代碼復用是在多個組件中復用代碼，因此這一塊是跟組件化的實現方案強關聯的，因此我們在學習前端 UI 框架時，不能只學習組件化的使用方法，還需要進一步學習如何在多個組件之中復用代碼的技巧，這樣才能讓我們寫出更高質量的代碼。

好了，現在你知道，在學習 React/Vue 的時候，我們應該學什么了嗎？

只要你把上面我說到的這些點都學會了，你就真正學會 React/Vue 了。

----------------【END】----------------

如果你是真心喜歡前端，并相信成長，想要提升自己的話，歡迎加入之道前端學習圈子。

戳這里 免費獲取 之道前端的學習資料和專屬服務。