《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 事件
命名事件處理器函數的最流行做法就是事件名前加上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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM