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