[書籍精讀]《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（推薦購買紙質書來學習）

標籤：JavaScript

上一篇：CSS布局方式--inline-block 布局

下一篇：JavaScript連載11-Switch