作者【意】米凱萊·貝爾托利 譯者：林昊 閱讀時間：2021.01.28 ~
第一章 React基礎(chǔ)
- 關(guān)注點分離
2.React 聲明式編程范式- 命令式編程描述代碼如何工作，而聲明式編程則表明想要實現(xiàn)什么目的
- 聲明式編程無需使用變量，也不用在執(zhí)行過程中持續(xù)更新變量的值
- 使用聲明式編程編程人員只需描述他們想要實現(xiàn)什么目的，而無需列出實現(xiàn)效果的所有步驟，最終代碼會更簡單，bug也會更少，可維護性會更強。
- 一致性比較：react調(diào)用組件時通過傳入props來取回底層元素，再對返回結(jié)果遞歸的執(zhí)行相同操作，直到取到完整的DOM節(jié)點數(shù)，將它渲染到屏幕上。
- 組件：元素的type是函數(shù)
- DOM節(jié)點：元素的type是字符串。
React最終目標：將創(chuàng)建組件所用到的每項技術(shù)都封裝起來，并根據(jù)它們的領(lǐng)域和功能進行關(guān)注點分離。
React是個很小的庫，分成了兩個包：
- React： 實現(xiàn)了react庫的核心特性（可以支持不同的目標平臺：瀏覽器的React Dom、移動設(shè)備上的React Native）
- react-dom：包含了與瀏覽器相關(guān)的所有特性。
- 只引入核心包，則無法使用JSX語法，因為JSX不是瀏覽器支持的標準語言 （簡單UI可使用createElement，復(fù)雜的就建議引入JSX轉(zhuǎn)譯器了）
- 如果應(yīng)用較大，建議引入路由庫來處理不同的頁面和視圖
- 應(yīng)用擴增，需要利用外部依賴項對復(fù)雜操作進行抽象，此時應(yīng)該引入“包管理器”
- 如果需要將應(yīng)用拆分成獨立的模塊并按正確的形式組織文件，則應(yīng)考慮使用模塊打包器。
- 上述通過迭代增多項目依賴內(nèi)容的方式，可避免學(xué)習新內(nèi)容時的“疲勞感”
第二章 整理代碼
JSX
- JSX react提供了兩種定義元素的方式：一種是使用JavaScript函數(shù)，另一種是使用類似xml的jsx語法
- babel： 用來轉(zhuǎn)義jsx和es2015（es6）后的語法（主流瀏覽器已經(jīng)很好的支持了es2015，但更新的語法及特性支持程度不一，所以把js相關(guān)代碼統(tǒng)一轉(zhuǎn)譯成es2015的版本后再執(zhí)行）
- npm i --global babel-cli
- babel source.js -o output.js
- npm i --global babel-preset-es2015 babel-preset-react // 產(chǎn)入產(chǎn)出的預(yù)設(shè)方案
- 運行babel會把jsx 語法的<div /> 轉(zhuǎn)換成 React.createElement('div')
- jsx創(chuàng)建html元素時以小寫開頭<button />，創(chuàng)建react元素時以大寫開頭<Button />
- jsx與html的區(qū)別
- 保留字取代 className=class , htmlFor = for
- 樣式 樣式名寫法由css字符串改為了駝峰式命名法
- 根元素 jsx會轉(zhuǎn)換成JavaScript函數(shù)，而JavaScript函數(shù)不允許返回兩個函數(shù)，因此多個同級元素必須封裝在同一個父元素里
- 空格 html中<span>標簽換行會有空格，jsx沒有
- 布爾值屬性 jsx：聲明即為true，html聲明未賦值即為false
- 展開屬性 來源于ecmaScript提案中的 對象剩余/展開屬性（Object Rest/Spread Properties for ECMAScript）
- 向子元素傳遞數(shù)據(jù)時，不要按引用方式傳遞整個JavaScript對象，而要使用對象的基本類型值以方便校驗，能夠bug更少、更穩(wěn)健。
Eslint
https://www.cnblogs.com/keepLeung/p/14363301.html
函數(shù)式編程基礎(chǔ)
- 是一種聲明式范式，避免代碼副作用，推崇數(shù)據(jù)不可變，從而更易維護，可使代碼更整潔
- 一等對象：可以賦值給變量，可以作為參數(shù)傳給其他函數(shù)
- 高階函數(shù)：接受一個函數(shù)作為參數(shù)（也可以是其他參數(shù)），通常添加一些增強的特殊行為，而后返回另一個函數(shù)作為返回值
- 純函數(shù)：不產(chǎn)生副作用，也就是說他不會改變自身作用域以外的東西
// 純函數(shù) const add = (x,y)=>x+y // 非純函數(shù) let x = 0; const add1 = y => {x = x+y} // 如果純函數(shù)需要改變作用域以外的東西，可以通過返回值進行 let x = 0; x = add(x,y) - 不可變性（一種操作數(shù)據(jù)的方式）:函數(shù)式編程中，函數(shù)不會修改變量值，而是創(chuàng)建新的變量，賦值后再返回
// 未遵循不可變性 const add = arr=>arr.push(3) const arr = [1,2] add(arr) // [1,2,3] add(arr) // [1,2,3,3] // 遵循不可變性 const add = arr=>arr.concat(3) const arr = [1,2] const result1 = add(arr) // [1,2,3] const result2 = add(arr) // [1,2,3] - 柯里化：將多參數(shù)函數(shù)轉(zhuǎn)化為單參數(shù)函數(shù)，同時這些單參數(shù)函數(shù)的返回值也是函數(shù)
// 不柯里化 const add = (x,y)=>x+y; // 柯里化 const add = x=>y=>x+y; - 組合：多個易于測試的純函數(shù)、組件組合成一個 可以提供更高級功能的新函數(shù)
const add = (x,y)=>x+y; const squre = x =>x*x; const addAndSqure = (x,y)=>squre(add(x,y)) - 冪等函數(shù)： 傳入相同的應(yīng)用狀態(tài)時返回同樣的UI
第三章 開發(fā)真正可復(fù)用的組件
- 箭頭函數(shù)會自動綁定this
- 用新狀態(tài)調(diào)用setState時，對象會合并到當前狀態(tài)上。
this.state={a:1}
this.setState({
b:2
})
// 最終的狀態(tài)
{a:1,b:2}
應(yīng)將setState看作異步的
- react知道如何優(yōu)化事件處理器內(nèi)部的狀態(tài)更新，但無法優(yōu)化執(zhí)行過程：正常順序取到舊值，setTimeout里取到新值
- React lumberjack用于調(diào)試應(yīng)用的某個特殊狀態(tài)
<script src="https;//unpkg.com/react-lumberjack@1.0.0"><script>
Lumberjack.back()
Lumberjack.forward()
- 只能將滿足需求的最少數(shù)據(jù)放到狀態(tài)中；觸發(fā)事件時只應(yīng)將需要更新的值添加到狀態(tài)中
- 多個組件都需要使用同一份信息，應(yīng)考慮使用應(yīng)用層級的狀態(tài)管理器，如redux
- 應(yīng)避免使用狀態(tài)的情況：
- 可派生的值（可通過props計算得到)
- 渲染方法
- props 可使用propTypes驗證參數(shù)類型（只在開發(fā)模式下有效），更像ts，定義參數(shù)類型明確的接口
Button.propTypes = {
text: React.PropTypes.string.isRequired
}
- React Docgen 可配合propTypes生成文檔
- 考慮多抽象一層以提高組件的可復(fù)用性
- storybook:已有組件列表服務(wù)
第四章 組合一切
第八章 服務(wù)端渲染（SSR， server-side rendering)的樂趣與益處
- 通用應(yīng)用是什么？
應(yīng)用的代碼可以同時用于服務(wù)器和客戶端
同構(gòu)應(yīng)用 ：指應(yīng)用在服務(wù)端和客戶端看起來一模一樣
啟用服務(wù)器渲染的理由
用React創(chuàng)建簡單的靜態(tài)服務(wù)端渲染應(yīng)用
了解服務(wù)端渲染的數(shù)據(jù)獲取方式，并理解脫離和注回等概念
用Zeit開發(fā)的next.js 可以輕松創(chuàng)建同時在服務(wù)端和客戶端運行的React應(yīng)用
問題：
- 服務(wù)器渲染（可以開發(fā)通用應(yīng)用）？
