一、技術簡介
1.React是一個聲明式、高效、靈活的、創(chuàng)建用戶界面的JavaScript庫
聲明式：只要使用React描述組件的樣子就可以改變用戶界面
高效：利益于React的虛擬DOM，以及其Diff算法
靈活：指React可以作為視圖層與其他技術棧配合使用
2.Universal渲染：一套代碼可以同時在服務端和客戶端渲染
3.Redux是一個JavaScript狀態(tài)容器，提供可預測的狀態(tài)管理，三條基本原則：
單一數(shù)據(jù)源：整個應用的state被存儲在一棵對象樹中，并且這個對象樹只存在于唯一一個store中
state只讀：并不代表我們無法改變state，指的是不允許直接對state這個變量重寫賦值
使用純函數(shù)來執(zhí)行修改：更新state的reducer只是一些純函數(shù)，它接收先前的state和action，并返回新的state
4.Redux的收益：可預測、便于組織管理代碼、支持Universal渲染、優(yōu)秀的擴展能力、容易測試、開發(fā)工具、社區(qū)和生態(tài)系統(tǒng)
二、在Node.js中運行React
1.Require Hook是Babel的一個內(nèi)建工具，用于在測試環(huán)境下編譯運行Node.js程序
三、在瀏覽器中運行React
1.一個React組件既可以在Node.js中渲染，也可以在瀏覽器中渲染
2.渲染組件到DOM節(jié)點中是使用了react-dom的render()功能
3.瀏覽器目前無法直接運行用ES2015和JSX語法編寫的Javascript腳本，需要使用Webpack和babel-loader打包編譯
四、開發(fā)服務器和熱替換
1.react-hmre主要包括兩個功能：熱替換React模板和捕捉錯誤
2.webpackDevMiddleware：將Webpack打包功能與Express服務器的資源服務功能合并，Express通過中間件打包，并讀取到內(nèi)存中
3.webpackHotMiddleware：熱替換
五、React的創(chuàng)新語法：JSX
1.class和for在JSX中需要寫為className和htmlFor
2.JavaScript表達式在JSX中必須被{}包裹，必須有返回值，無法直接使用if else語句，要使用if else語句可以放在函數(shù)中
3.style的屬性值不能是字符串而必須為對象，對象中的屬性名使用駝峰命名法，如font-size為fontSize
4.注釋寫在{}內(nèi)
5.數(shù)組會自動展開所有成員，但是如果數(shù)組或迭代器中的每一項都是HTML標簽或組件，那么它們必須要擁有唯一的key屬性
6.React可以渲染HTML標簽或React組件，HTML標簽使用小寫字母的標簽名，而React組件的標簽名首字母則需要大寫
六、React的數(shù)據(jù)載體：state、props與context
1.State：應該被稱為內(nèi)部狀態(tài)或局部狀態(tài)，可以構(gòu)造函數(shù)中初始化內(nèi)部狀態(tài)，可以通過this.setState方法更新內(nèi)部狀態(tài)，還可以使用this.state獲取內(nèi)部狀態(tài)，這些內(nèi)部狀態(tài)與React的事件系統(tǒng)配合就可以實現(xiàn)一些用戶交互功能
2.Props：屬性的意思，可以使用props向React組件傳遞數(shù)據(jù)，React組件從props中拿到數(shù)據(jù)，然后返回視圖
3.context和全局變量非常相似，大多數(shù)場景下，我們都應該盡量避免使用，適合使用的場景包括傳遞登錄信、當前 語言以及主題信息等；如果只是傳遞一些功能模塊的數(shù)據(jù)，使用props傳遞數(shù)據(jù)會更加清晰和容易理解
七、React的兩個對象：ReactElement與組件實例
1.ReactElement是一個不可變的普通對象，它描述了一個組件的實例或一個DOM節(jié)點，只包含組件的類型（比如h1、或者APP）、屬性以及子元素等信息，不是組件的實例，不能在ReactElement中調(diào)用React組件的任何方法
2.對一個組件而言，props就是輸入，ReactElement就是輸出
3.Refs是一個特殊的屬性，可以是一個回調(diào)函數(shù)，也可以是一個字符串
4.組件實例的生滅：
componentWillMount在渲染前后調(diào)用
componentDidMount在每一次渲染后調(diào)用
componentWillReceiveProps在組件接收到一個新的prop時被調(diào)用，在第一次渲染時不會被調(diào)用
shouldComponentUpdat返回一個布爾值。在組件接收到新的props或者state時調(diào)用
componentWillUpdate在組件接收到新的props或者state但還沒有render時被調(diào)用，在初始化時不會被調(diào)用
componentDidUpdate在組件完成更新后立即調(diào)用，在初始化時不會被調(diào)用
componentWillUnmount在組件從DOM中移除的時候立刻被調(diào)用
5.React組件生命周期函數(shù)中的this指向組件實例，自定義組件方法的this會因“調(diào)用者”不同而不同，為了在組件的自定義方法中獲取組件實例，需要手動綁定this到組件實例
八、初識Redux
1.Reducer是形式為(state,action)=>state的純函數(shù)，描述了action如何把state轉(zhuǎn)變成下一個state
2.純函數(shù)（Pure Function）：輸入/輸出數(shù)據(jù)流全是顯式（Explicit）的。顯式的意思是，函數(shù)與外界交換數(shù)據(jù)只有一個唯一渠道——參數(shù)和返回值；函數(shù)從函數(shù)外部接受的所有輸入信息都通過參數(shù)傳遞到該函數(shù)內(nèi)部；函數(shù)輸出到函數(shù)外部的所有信息都通過返回值傳遞到該函數(shù)外部
3.純函數(shù)不能訪問外部變量，它能接觸的“外地人”只有來自外部的參數(shù)，純函數(shù)不能修改參數(shù)，因為這樣做可能會把一些信息通過輸入?yún)?shù)，夾帶到外界
4.Action是個JavaScript對象，它是store數(shù)據(jù)的唯一來源
5.Reducer是純函數(shù)，不要在reducer中做這些事情：修改傳入?yún)?shù)；執(zhí)行有副作用的操作；調(diào)用非純函數(shù)
九、Action創(chuàng)建函數(shù)與Redux Thunk中間件
1.Redux Thunk中間件可以讓action創(chuàng)建函數(shù)先不返回action對象，而是返回一個函數(shù)
2.Action創(chuàng)建函數(shù)就是創(chuàng)建action的函數(shù)，如果要發(fā)起action創(chuàng)建函數(shù)，只需要將其返回結(jié)果傳給dispatch()
十、React與Redux的連接：手動連接
1.手動連接兩個明顯的缺點：無法直接向里面的組件傳遞state和方法；任意state的變化都會導致整個組件樹的重新渲染，沒有優(yōu)化性能
2.react-redux不僅可以給組件樹中任一組件綁定state和方法，還進行了性能優(yōu)化，可以避免不必要的重新渲染
十一、React與Redux的連接：使用react-redux連接
1.使用react-redux
2.Provider的職能是通過context將store傳遞給子組件
3.connect是一個嵌套函數(shù)，運行后，會生成一個高階組件（Higher-order Components），接受一個組件作為參數(shù)再次運行，會生成一個新組件
4.絕大多數(shù)情況下，我們都應該將Redux連接在組件頂層，不要讓里面的組件感受到Redux的存在
十二、實現(xiàn)撤銷/重做
1.高階函數(shù)是函數(shù)式編程中的一個概念，它可以接收其他函數(shù)作為參數(shù)，然后返回一個新的函數(shù)。高階函數(shù)以及高階組件都是為了增強函數(shù)或組件 的功能而設計的。一般情況下，生成的新函數(shù)或組件不會失去原有的功能
2.Redux并不低效，它給我們帶來了清晰的狀態(tài)管理和非常好的開發(fā)體驗
十三、測試
1.測試工具：
Mocha：只需要在Mocha提供的全局函數(shù)（比如describe、it）中編寫測試并運行，就可以生成精美的測試報告
Enzyme：專門為React設計的JavaScript測試工具，用于渲染組件并操作組件中的DOM代碼
Expect：斷言庫，提供了常用的斷言函數(shù)
十四、Redux的全局狀態(tài)與React組件的內(nèi)部狀態(tài)
1.Redux的全局狀態(tài)就是通過store.getState()獲取的state，React組件的內(nèi)部狀態(tài)就是通過this.state獲取的state（這里的this指的是組件實例）
2.理想狀態(tài)下，程序的所有數(shù)據(jù)都應該放在Redux的全局狀態(tài)中
3.如果一些狀態(tài)只在一個組件內(nèi)部臨時使用，也可以使用組件的內(nèi)部狀態(tài)
十五、React與Redux中的數(shù)組處理
1.都是JS的語法
2.reduce()方法接收一個函數(shù)作為累加器（accumulator），數(shù)組中的每個值（從左到右）開始合并，最終為一個值
3.filter()方法使用指定的函數(shù)測試所有元素，并創(chuàng)建一個包含所有通過測試的元素的新數(shù)組
4.map()方法返回一個由原數(shù)組中的每個元素調(diào)用一個指定方法后的返回值組成的新數(shù)組
5.every()方法用于測試數(shù)組中所有元素是否都通過了指定函數(shù)的測試
6.some()方法用于測試數(shù)組中是否至少有一項元素通過了指定函數(shù)的測試
7.展開運算符允許一個表達式某處展開，常用的場景包括：函數(shù)參數(shù)、數(shù)組元素、解構(gòu)賦值
十六、Redux的大舞臺：異步
1.JS是一門事件驅(qū)動編程語言，如果為特定事件注冊了一段代碼，這段代碼將會在事件被觸發(fā)時執(zhí)行，正是事件驅(qū)動這個特性讓JS可以執(zhí)行異步代碼，而不會阻塞后面程序的運行
2.Promise是處理異步的優(yōu)秀方案，它不僅可以通過鏈式操作幫助我們擺脫回調(diào)地獄，還可以在鏈式操作過程中的任何時刻捕捉異常
3.Redux只能實現(xiàn)同步操作，但是可以通過Thunk中間件實現(xiàn)異步
十七、自定義Redux中間件
1.自定義Redux中間件只需要編寫一個三層的嵌套函數(shù)
2.一個異步請求通常需要編寫三個action，分別在開始請求、請求成功和請求失敗時被發(fā)起
十八、Universal渲染
1.預載數(shù)據(jù)指的是在服務端準備好數(shù)據(jù)后再渲染頁面，這樣瀏覽器接收到的才是攜帶數(shù)據(jù)的頁面。如果在客戶端請求數(shù)據(jù)，則往往會出現(xiàn) “閃屏”問題
2.為了和服務端吐出的頁面保持一致，客戶端需要和服務端公用組件和state
十九、Universal渲染神器：Webpack同構(gòu)工具
1.從本質(zhì)上來說，Universal渲染就是服務端與客戶端環(huán)境相互模擬的技術
2.Webpack同構(gòu)工具的工作原理是更改Node.js的require()方法，使其擁有與客戶端一樣的功能
二十、多頁面的實現(xiàn)：路由
1.路由本質(zhì)上只是一個多重視圖的組件
2.配置路由匹配信息，可以告訴路由如何根據(jù)URL來運行和顯示相應的組件
3.Link組件的功能和<a/>標簽相似，但是它支持一些可用于激活狀態(tài)的屬性
4.要實現(xiàn)服務端路由，只需要在Express中間件加上一個匹配路由的函數(shù)，并在其回調(diào)中進行渲染即可
二十一、多頁面下的異步操作
1.redux-amrc封裝了Redux中的重復性異步操作，只需要將Promise和key值傳給redux-amrc，它會完成接下來的所有異步操作
2.在路由組件的onEnter中發(fā)起redux-amrc定制的action創(chuàng)建函數(shù)，可以實現(xiàn)數(shù)據(jù)預載
3.在用戶操作所觸發(fā)的函數(shù)中發(fā)起redux-amrc定制的action創(chuàng)建函數(shù)，可以實現(xiàn)手動加載數(shù)據(jù)
4.想要操作redux-amrc中的數(shù)據(jù)，應該將處理action的reducer組合為對象，然后將該對象作為參數(shù)傳入reducerCreator中
二十二、使用Bootstrap
1.bootstrap-loader是一個用來加載Bootstrap的Webpack加載器，使用Sass處理CSS樣式，對于Bootstrap 3&4都能支持
2.PostCSS是一個使用JS插件轉(zhuǎn)換樣式的工具，Autoprefixer是最流行的PostCSS插件之一
3.React-Bootstrap是一個可利用的前端組件庫，可以通過更簡潔的React組件獲取Bootstrap的外觀和體驗
二十三、搭建大型項目
1.在開發(fā)環(huán)境中，通常使用開發(fā)服務器為程序提供資源服務，實現(xiàn)代碼的熱替換
2.在生產(chǎn)環(huán)境下，應該先使用Babel編譯Node.js程序，然后使用node運行
3.在生產(chǎn)環(huán)境下，不需要使用開發(fā)服務器來提供資源，而是直接將其打包到靜態(tài)資源目錄，然后在頁面中引入入口文件即可
二十四、表單
二十五、圖表與表格
二十六、用戶認證
二十七、部署
https://github.com/lewis617/react-redux-book
