[書籍精讀]《React進階之路》精讀筆記分享

寫在前面

• 書籍介紹：《React進階之路》詳細介紹了React技術棧涉及的主要技術。本書分為基礎篇、進階篇和實戰篇三部分。基礎篇主要介紹React的基本用法，包括React 16的新特性；進階篇深入講解組件state、虛擬DOM、高階組件等React中的重要概念，同時對初學者容易困惑的知識點做了介紹；實戰篇介紹React Router、Redux和MobX 3個React技術棧的重要成員，並通過實戰項目講解這些技術如何和React結合使用。
• 我的簡評：這本書適合初級的React開發者，書名雖是進階，實際上就是一本入門的書。書中對一些React用法總結的還挺不錯，實踐性比較強。
• ！！文末有pdf書籍、筆記思維導圖、隨書代碼打包下載地址，需要請自取！閱讀[書籍精讀系列]所有文章，請移步：推薦收藏-JavaScript書籍精讀筆記系列導航

1.初識React

1.1.簡介

• 一句話：通過引入虛擬DOM、狀態、單項數據流等設計理念，形成以組件為核心，用組件搭建UI的開發模式，理順了UI的開發過程，完美的將數據、組件狀態和UI映射到一起，極大地提高了開發大型Web應用的效率

1.2.特點

• 聲明式的視圖層、簡單的更新流程、靈活的渲染實現、高效的DOM操作

2.React基礎

2.1.Jsx

• 簡介：一種用於描述UI的JavaScript擴展語法
• Jsx語法：基本語法、標簽類型、JavaScript表達式、標簽屬性、註釋
• Jsx不是必需的

2.2.組件

• 定義：組件將應用的UI拆分成獨立的、可復用的模塊
• props：用於把父組件中的數據或方法傳遞給子組件，供子組件使用
• state：組件內部的狀態，state的變化最終將反映到組件UI的變化上
• props和state比較：props是組件對外的介面，組件通過props接收外部傳入的數據(包括方法)；state是組件對內的介面，組件內部狀態的變化通過state來反映。另外，props是只讀的，state是可變的
• 有狀態組件和無狀態組件：用不到state就稱為無狀態組件
• 屬性校驗和預設屬性：PropTypes和defaultProps
• 組件樣式：外部和內聯
• 組件和元素：React元素是一個普通的JavaScript對象，React組件是一個class或函數

2.3.組件的生命周期

• 掛載階段：constructor、componentWillMount、render、componentDidMount
• 更新階段：componentWillReceiveProps(nextProps)、shouldComponentUpdate(nextProps, nextState)、componentWillUpdate(nextProps, nextState)、render、componentDidUpdate(prevProps, prevState)
• 卸載階段：componentWillUnmount

2.4.列表和Keys

• 使用key屬性來標記列表中的每個元素，通過key知道哪些元素髮生了變化，只渲染髮生變化的元素，提高渲染效率

2.5.事件處理

• 合成事件，並不是原生的DOM事件
• 1.使用箭頭函數
• 2.使用組件方法
• 3.屬性初始化語法

2.6.表單

• 受控組件：表單元素的值是由React來管理的（input文本框、select列表、checkbox覆選框和radiobox單選框）
• 非受控組件：表單元素的狀態依然由表單元素自己管理

3.React16新特性

• 1.render新的返回類型：數組和字元串
• 2.錯誤處理：錯誤邊界componentDidCatch
• 3.Portals：任意組件都可以將彈窗組件渲染到根節點上，以方便彈窗的顯示
• 4.自定義DOM屬性：之前會忽略不識別的HTML和SVG屬性，現在React會把不識別的屬性傳遞給DOM元素

4.深入理解組件

4.1.組件state

• 設計合適的state
• 正確修改state：不能直接修改state；state的更新是非同步的；state的更新是一個合併的過程；
• state與不可變對象：狀態的類型是不可變類型；狀態的類型是數組；狀態的類型是普通對象(不包含字元串、數組)；

4.2.組件與伺服器通信

• 掛載階段通信：componentDidMount是執行組件與伺服器通信的最佳地方
• 更新階段通信

4.3.組件間通信

• 父子組件通信：父向子：通過父組件向子組件的props傳遞數據完成；子向父：通過父組件向子組件傳遞的回調方法；
• 兄弟組件通信：通過狀態提升的方式實現；即把組件之間需要共用的狀態保存到距離他們最近的共同父組件內，任意一個兄弟組件都可以通過父組件傳遞的回調函數來修改共用狀態，父組件中共用狀態的變化也會通過props向下傳遞給所有兄弟組件，從而完成兄弟組件之間的通信；
• 組件層級太深時使用Context：創建context的方式是：在提供context的組件內新增一個getChildContext方法，返回context對象，然後在組件的childContextTypes屬性上定義context對象的屬性的類型信息
• 延伸：使用消息隊列實現組件通信：改變數據的組件發起一個消息，使用數據的組件監聽這個消息，併在響應函數中觸發setState來改變組件狀態

4.4.特殊的ref

• 在DOM元素上使用ref：ref接收一個回調函數作為值，在組件被掛載或卸載時，回調函數會被調用。在組件被掛載時，回調函數會接收當前dom元素作為參數，在組件被卸載時，回調函數會接收null作為參數
• 在組件上使用ref：此時ref的回調函數接收的參數是當前組件的實例，提供在組件外部操作組件的方式
• 父組件訪問子組件的DOM節點：需要在父組件獲取子組件的某個DOM元素

5.虛擬DOM和性能優化

5.1.虛擬DOM

• 虛擬DOM使用普通的JavaScript對象描述DOM元素

5.2.Diff演算法

• 原理：通過比較兩次虛擬DOM結構的變化找出差異部分，更新到真實DOM上，從而減少對真實DOM上執行的操作，提高程式執行效率
• 幾種情況：1.當根節點是不同類型時；2.當根節點是相同的DOM元素類型時；3.當根節點是相同的組件類型時；

5.3.性能優化

• 1.使用生產環境版本的庫
• 2.避免不必要的組件渲染
• 3.使用key

5.4.性能檢測工具

• React Developer Tools for Chrome
• Chrome Performance Tab

6.高階組件

6.1.基本概念

• 接收React組件作為參數，並且返回一個新的React組件。實現方式本質上是裝飾者模式

6.2.使用場景

• 1.操作props
• 2.通過ref訪問組件實例
• 3.組件狀態提升
• 4.用其他元素包裝組件

6.4.繼承實現高階組件

• 屬性代理實現高階組件：由高階組件處理通用邏輯，然後將相關屬性傳遞給被包裝組件
• 還可以通過繼承方式實現高階組件，通過繼承被包裝組件實現邏輯的復用

6.5.註意事項

• 1.為更好地區別包裝了不同組件的高階組件，需要對高階組件的顯示名稱做自定義處理
• 2.不要在組件的render方法中使用高階組件，儘量也不要在組件的其他生命周期方法中使用高階組件
• 3.如果需要使用被包裝組件的靜態方法，必須手動複製這些靜態方法
• 4.refs不會被傳遞給被包裝組件
• 5.與父組件的區別

7.路由：用React Router開發單頁面應用

• 7.1.前端路由的實現方式
• 7.2.Router對象
• 7.3.Route是React Router中用於配置路由信息的組件
• 7.4.Link鏈接組件

8.Redux：可預測的狀態管理機

8.1.三大原則

• 1.唯一數據源
• 2.保持應用狀態只讀
• 3.應用狀態的改變通過純函數完成

8.2.主要組成

• 1.action：信息的載體
• 2.reducer：描述應用發生了什麼操作
• 3.store：是action和reducer之間的橋梁

8.3.store負責的工作

• 1.保存應用狀態
• 2.通過方法getState()訪問應用狀態
• 3.通過方法dispatch(action)發送更新狀態的意圖
• 4.通過方法subscribe(listener)註冊監聽函數、監聽應用狀態的改變

9.Redux實戰

9.1.組織項目結構

• 目前主流的方案有三種：按照類型、按照頁面功能和Ducks
• 按照類型：就是將充當component、container、action、reducer等不同角色的文件分別放在不同的文件夾下。問題：項目規模較大時，非常不方便
• 按照頁面功能：就是將一個頁面功能使用到的組件、狀態和行為都在同一個文件夾下。優點：方便開發、易於功能的擴展。問題：需要頻繁在reducer、action、action type等不同文件間切換
• Ducks：提倡將相關聯的reducer、action types和action creators寫到一個文件里。本質上是以應用的狀態作為劃分模塊的依據，而不是以界面功能作為劃分模塊的依據。

9.2.設計state

• 錯誤1：以API作為設計的state的依據
• 錯誤2：以頁面UI作為設計state的依據
• 合理設計state：最重要的是記住一句話：像設計資料庫一樣設計state；類似設計資料庫總結的三個原則（1.把整個應用的狀態按照領域分為若幹個子狀態，子狀態之間不能保存重覆的數據；2.state以鍵值對的結構存儲數據，以記錄的key或ID作為記錄的索引，記錄中的其他欄位都依賴於索引；3.state中不能保存可以通過state中的已有欄位計算而來的數據，即state中的欄位不互相依賴；）

9.3.設計模塊

• app模塊、auth模塊、posts模塊、comments模塊、users模塊、ui模塊、index模塊

9.4.連接Redux

• 註入state
• 註入action creators
• connecte連接PostList和Redux

9.5.Redux調試工具

• Redux DevTools
• 一款用於調試Redux應用的瀏覽器插件，可以實時的顯示當前應用的state信息、action觸發的記錄以及state的變化

9.6.性能優化

• React Router引起的組件重覆渲染問題
• Immutable.js：Redux的state必須是不可變對象，reducer中每次返回的state都是一個新對象；Immutable.js的作用在於以更高效的方式創建不可變對象；主要3個優點（保證數據的不可變、豐富的API、優異的性能）
• Reselect：Redux state的任意改變都會導致所有容器組件的mapStateToProps的重新調用，進而導致使用到的selectors重新計算；Reselect可以創建具有記憶功能的selectors，當selectors計算使用的參數未發生變化時，不會再次計算，而是直接使用上次緩存的計算結果；

寫在後面

• pdf書籍、筆記思維導圖、隨書代碼打包下載地址：https://pan.baidu.com/s/15g8dwBHcPJBVEmO7mlh52g(提取碼：zfjg)
• 紙質書京東購買地址：https://u.jd.com/wnGjvI（推薦購買紙質書來學習）