《React設計模式與最佳實踐》筆記

書裏的demo都是15.3.2如下版本的，有些demo用最新的react 16.x版本會報錯，安裝包的時候記得改一下版本

 

第一章 React 基礎

命令式編程描述代碼如何工做，而聲明式編程則代表想要實現什麼目的

 

第二章 整理代碼

展開屬性操做符也是一項很重要的特性

{...props}

 

常見模式

1. 多行書寫

2. 多個屬性的書寫

3. 條件語句

render-if包

4. 循環

map

5. 控制語句

jsx-control-statements

6. 次級渲染

拆分組件

 

ESLint

.eslintrc 文件

插件 eslint-plugin-react eslint-config-airbnb eslint@^2.9.0 eslint-pluginjsx-a11y@^1.2.0 eslint-plugin-import@^1.7.0 eslint-plugin-react@^5.0.1

 

函數式編程基礎

純粹函數是指它不產生反作用，也就是說它不會改變自身做用域之外的任何東西。

函數不會修改變量值，而是建立新的變量，賦新值後再返回變量。操做數據的這種方式稱爲不可變性。

柯里化

函數（和組件）能夠結合產生新函數，從而提供更高級的功能與屬性。

 

第三章 開發真正可複用的組件

1.props

2.state

解決函數綁定問題的最佳方案是在構造器內進行綁定操做，這樣即便屢次渲染組件，它也不會發生任何改變。

3.無狀態函數式組件,沒有state

this 在無狀態函數式組件的執行過程當中不指向組件自己。

無狀態函數式組件只接收props（以及上下文）參數，並返回相應元素。

沒有提供任何像componentDidMount 這樣的生命週期鉤子

setState 方法是異步的

propTypes，類型校驗

 

可複用組件

react-docgen

 

可用的風格指南

react-storybook 包：@kadira/react-storybook-addon-info

 

第四章 組合一切

4.1 組件間的通訊

props

children 是一個特殊的prop，擁有者組件能夠將它傳遞給渲染方法內定義的組件。

 

4.2 容器組件與表現組件模式

容器組件：

 更關心行爲部分；

 負責渲染對應的表現組件；

 發起API 請求並操做數據；

 定義事件處理器；

 寫做類的形式。

 

表現組件：

 更關心視覺表現；

 負責渲染HTML 標記（或其餘組件）；

 以props 的形式從父組件接收數據；

 一般寫做無狀態函數式組件。

 

4.3 mixin

mixin 只能和createClass 工廠方法搭配使用

 

4.4 高階組件

高階組件其實就是函數，它接收組件做爲參數，對組件進行加強後返回。

 

4.5 recompose

context 16.x有了很大的更改

 

4.6 函數子組件

const Name = ({ children }) => children('World')

Name.propTypes = {

hildren: React.PropTypes.func.isRequired,

}

<Name>

{name => <div>Hello, {name}!</div>}

</Name>

 

第五章 恰當地獲取數據

5.1 數據流

單向數據流

5.1.1 子組件與父組件的通訊（回調函數）

每當子組件須要向父組件推送數據或者通知父組件發生了某個事件時，能夠傳遞迴調函數，同時將其他邏輯放在父組件中。

 

5.2 數據獲取

用於獲取數據的代碼能夠放在兩個生命週期鉤子中：componentWillMount 和component-DidMount。

 

5.3 react-refetch

 

第六章 爲瀏覽器編寫代碼

6.1 表單

6.1.1 自由組件

6.1.2 受控組件

6.1.3 JSON schema

react-jsonschema-form

 

6.2 事件

http://reactpatterns.com/#event-switch

命名事件處理器函數的最流行作法就是事件名前加上handle 前綴（如handleKeyDown）。

若是須要爲同一個組件建立新的事件處理器，無須建立新的方法並綁定，只要在switch 語句中增長一個事例便可。

React 實際作的是在根元素上添加單個事件處理器，因爲事件冒泡機制，這個處理器會監聽全部事件。當瀏覽器觸發咱們想要的事件時，React 會表明相應組件調用處理器。這個技巧稱做事件代理，能夠優化內存和速度。

 

6.3 ref

表單用得多

 

6.4 動畫

react-addons-css-transition-group react-motion

 

第七章 美化組件

7.1 CSS in JavaScript

7.2 行內樣式

7.3 Radium

7.4 CSS 模塊

react-css-modules

!! 7.5 Styled Component

這個庫的另外一項絕佳特性是主題。將組件封裝在ThemeProvider 組件中，能夠爲組件樹注入主題屬性，當要和其餘組件共享一部分樣式，剩下部分取決於當前選中主題時，建立UI 會變得很是方便。

 

第八章 服務端渲染的樂趣與益處

8.1 通用應用

同構應用就是指應用在服務端和客戶端看起來如出一轍。

 

8.2 使用服務端渲染的緣由

8.2.1 SEO

8.2.2 通用代碼庫

8.2.3 性能更強

8.2.4 不要低估複雜度

 

8.5 Next.js

 

第九章 提高應用性能

9.1 一致性比較與key 屬性，key要惟一的

 

9.2 優化手段

shouldComponentUpdate

它的用法很直觀，建立組件類時繼承React.PureComponent 來代替React.Component便可。

9.2.2 無狀態函數式組件

 

9.3 經常使用解決方案

9.3.1 why-did-you-update 好像沒有用了

9.3.2 在渲染方法中建立函數

9.3.3 props 常量

9.3.4 重構與良好設計

 

9.4 工具與庫

immutable.js

 

9.4.2 性能監控工具

chrome-react-perf

react-perf-tool

 

9.4.3 Babel 插件

babel-plugin-transform-react-inline-elements

 

第十章 測試與調試

Jest

Mocha

TestUtils 和Enzyme

 

測試React 組件的方式通常有兩種：

淺渲染；

將組件掛載到獨立DOM中。

 

10.8 經常使用測試方案

10.8.1 測試高階組件

10.8.2 頁面對象模式

 

10.10 React 錯誤處理

react-component-errors

 

第十一章 須要避免的反模式

11.1 用prop 初始化狀態

若是咱們真的想要用屬性值初始化組件，而且能夠確定這些值將來不會改變呢？

這種狀況下，最好闡明這種作法的用意，併爲屬性起一個能清楚表達含義的名稱

 

11.2 修改狀態

首先，若是不經過setState 修改狀態，則會出現兩種糟糕的狀況：

 狀態改變不會觸發組件重渲染；

 之後不管什麼時候調用setState，以前修改的狀態都會渲染到頁面上。

 

11.3 將數組索引做爲key

 

11.4 在DOM 元素上展開props 對象

 

第十二章 將來的行動

12.3 發佈npm 包

npm publish