React與Redux開發的實例分析

這篇文章給大家介紹React與Redux開發的實例分析，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

一、技術簡介

1.React是一個聲明式、高效、靈活的、創建用戶界面的JavaScript庫

• 聲明式：只要使用React描述組件的樣子就可以改變用戶界面

• 高效：利益于React的虛擬DOM，以及其Diff算法

• 靈活：指React可以作為視圖層與其他技術棧配合使用

2.Universal渲染：一套代碼可以同時在服務端和客戶端渲染

3.Redux是一個JavaScript狀態容器，提供可預測的狀態管理，三條基本原則：

• 單一數據源：整個應用的state被存儲在一棵對象樹中，并且這個對象樹只存在于唯一一個store中

• state只讀：并不代表我們無法改變state，指的是不允許直接對state這個變量重寫賦值

• 使用純函數來執行修改：更新state的reducer只是一些純函數，它接收先前的state和action，并返回新的state

4.Redux的收益：可預測、便于組織管理代碼、支持Universal渲染、優秀的擴展能力、容易測試、開發工具、社區和生態系統

二、在Node.js中運行React

1.Require Hook是Babel的一個內建工具，用于在測試環境下編譯運行Node.js程序

三、在瀏覽器中運行React

1.一個React組件既可以在Node.js中渲染，也可以在瀏覽器中渲染

2.渲染組件到DOM節點中是使用了react-dom的render()功能

3.瀏覽器目前無法直接運行用ES2015和JSX語法編寫的Javascript腳本，需要使用Webpack和babel-loader打包編譯

四、開發服務器和熱替換

1.react-hmre主要包括兩個功能：熱替換React模板和捕捉錯誤

2.webpackDevMiddleware：將Webpack打包功能與Express服務器的資源服務功能合并，Express通過中間件打包，并讀取到內存中

3.webpackHotMiddleware：熱替換

五、React的創新語法：JSX

1.class和for在JSX中需要寫為className和htmlFor

2.JavaScript表達式在JSX中必須被{}包裹，必須有返回值，無法直接使用if else語句，要使用if else語句可以放在函數中

3.style的屬性值不能是字符串而必須為對象，對象中的屬性名使用駝峰命名法，如font-size為fontSize

4.注釋寫在{}內

5.數組會自動展開所有成員，但是如果數組或迭代器中的每一項都是HTML標簽或組件，那么它們必須要擁有唯一的key屬性

6.React可以渲染HTML標簽或React組件，HTML標簽使用小寫字母的標簽名，而React組件的標簽名首字母則需要大寫

六、React的數據載體：state、props與context

1.State：應該被稱為內部狀態或局部狀態，可以構造函數中初始化內部狀態，可以通過this.setState方法更新內部狀態，還可以使用this.state獲取內部狀態，這些內部狀態與React的事件系統配合就可以實現一些用戶交互功能

2.Props：屬性的意思，可以使用props向React組件傳遞數據，React組件從props中拿到數據，然后返回視圖

3.context和全局變量非常相似，大多數場景下，我們都應該盡量避免使用，適合使用的場景包括傳遞登錄信、當前 語言以及主題信息等；如果只是傳遞一些功能模塊的數據，使用props傳遞數據會更加清晰和容易理解

七、React的兩個對象：ReactElement與組件實例

1.ReactElement是一個不可變的普通對象，它描述了一個組件的實例或一個DOM節點，只包含組件的類型（比如h2、或者APP）、屬性以及子元素等信息，不是組件的實例，不能在ReactElement中調用React組件的任何方法

2.對一個組件而言，props就是輸入，ReactElement就是輸出

3.Refs是一個特殊的屬性，可以是一個回調函數，也可以是一個字符串

4.組件實例的生滅：

• componentWillMount在渲染前后調用

• componentDidMount在每一次渲染后調用

• componentWillReceiveProps在組件接收到一個新的prop時被調用，在第一次渲染時不會被調用

• shouldComponentUpdat返回一個布爾值。在組件接收到新的props或者state時調用

• componentWillUpdate在組件接收到新的props或者state但還沒有render時被調用，在初始化時不會被調用

• componentDidUpdate在組件完成更新后立即調用，在初始化時不會被調用

• componentWillUnmount在組件從DOM中移除的時候立刻被調用

5.React組件生命周期函數中的this指向組件實例，自定義組件方法的this會因“調用者”不同而不同，為了在組件的自定義方法中獲取組件實例，需要手動綁定this到組件實例

八、初識Redux

1.Reducer是形式為(state,action)=>state的純函數，描述了action如何把state轉變成下一個state

2.純函數（Pure Function）：輸入/輸出數據流全是顯式（Explicit）的。顯式的意思是，函數與外界交換數據只有一個唯一渠道——參數和返回值；函數從函數外部接受的所有輸入信息都通過參數傳遞到該函數內部；函數輸出到函數外部的所有信息都通過返回值傳遞到該函數外部

3.純函數不能訪問外部變量，它能接觸的“外地人”只有來自外部的參數，純函數不能修改參數，因為這樣做可能會把一些信息通過輸入參數，夾帶到外界

4.Action是個JavaScript對象，它是store數據的唯一來源

5.Reducer是純函數，不要在reducer中做這些事情：修改傳入參數；執行有副作用的操作；調用非純函數

九、Action創建函數與Redux Thunk中間件

1.Redux Thunk中間件可以讓action創建函數先不返回action對象，而是返回一個函數

2.Action創建函數就是創建action的函數，如果要發起action創建函數，只需要將其返回結果傳給dispatch()

十、React與Redux的連接：手動連接

1.手動連接兩個明顯的缺點：無法直接向里面的組件傳遞state和方法；任意state的變化都會導致整個組件樹的重新渲染，沒有優化性能

2.react-redux不僅可以給組件樹中任一組件綁定state和方法，還進行了性能優化，可以避免不必要的重新渲染

十一、React與Redux的連接：使用react-redux連接

1.使用react-redux

2.Provider的職能是通過context將store傳遞給子組件

3.connect是一個嵌套函數，運行后，會生成一個高階組件（Higher-order Components），接受一個組件作為參數再次運行，會生成一個新組件

4.絕大多數情況下，我們都應該將Redux連接在組件頂層，不要讓里面的組件感受到Redux的存在

十二、實現撤銷/重做

1.高階函數是函數式編程中的一個概念，它可以接收其他函數作為參數，然后返回一個新的函數。高階函數以及高階組件都是為了增強函數或組件 的功能而設計的。一般情況下，生成的新函數或組件不會失去原有的功能

2.Redux并不低效，它給我們帶來了清晰的狀態管理和非常好的開發體驗

十三、測試

1.測試工具：

• Mocha：只需要在Mocha提供的全局函數（比如describe、it）中編寫測試并運行，就可以生成精美的測試報告

• Enzyme：專門為React設計的JavaScript測試工具，用于渲染組件并操作組件中的DOM代碼

• Expect：斷言庫，提供了常用的斷言函數

  
  

十四、Redux的全局狀態與React組件的內部狀態

1.Redux的全局狀態就是通過store.getState()獲取的state，React組件的內部狀態就是通過this.state獲取的state（這里的this指的是組件實例）

2.理想狀態下，程序的所有數據都應該放在Redux的全局狀態中

3.如果一些狀態只在一個組件內部臨時使用，也可以使用組件的內部狀態

十五、React與Redux中的數組處理

1.都是JS的語法

2.reduce()方法接收一個函數作為累加器（accumulator），數組中的每個值（從左到右）開始合并，最終為一個值

3.filter()方法使用指定的函數測試所有元素，并創建一個包含所有通過測試的元素的新數組

4.map()方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組

5.every()方法用于測試數組中所有元素是否都通過了指定函數的測試

6.some()方法用于測試數組中是否至少有一項元素通過了指定函數的測試

7.展開運算符允許一個表達式某處展開，常用的場景包括：函數參數、數組元素、解構賦值

十六、Redux的大舞臺：異步

1.JS是一門事件驅動編程語言，如果為特定事件注冊了一段代碼，這段代碼將會在事件被觸發時執行，正是事件驅動這個特性讓JS可以執行異步代碼，而不會阻塞后面程序的運行

2.Promise是處理異步的優秀方案，它不僅可以通過鏈式操作幫助我們擺脫回調地獄，還可以在鏈式操作過程中的任何時刻捕捉異常

3.Redux只能實現同步操作，但是可以通過Thunk中間件實現異步

十七、自定義Redux中間件

1.自定義Redux中間件只需要編寫一個三層的嵌套函數

2.一個異步請求通常需要編寫三個action，分別在開始請求、請求成功和請求失敗時被發起

十八、Universal渲染

1.預載數據指的是在服務端準備好數據后再渲染頁面，這樣瀏覽器接收到的才是攜帶數據的頁面。如果在客戶端請求數據，則往往會出現 “閃屏”問題

2.為了和服務端吐出的頁面保持一致，客戶端需要和服務端公用組件和state

十九、Universal渲染神器：Webpack同構工具

1.從本質上來說，Universal渲染就是服務端與客戶端環境相互模擬的技術

2.Webpack同構工具的工作原理是更改Node.js的require()方法，使其擁有與客戶端一樣的功能

二十、多頁面的實現：路由

1.路由本質上只是一個多重視圖的組件

2.配置路由匹配信息，可以告訴路由如何根據URL來運行和顯示相應的組件

3.Link組件的功能和<a/>標簽相似，但是它支持一些可用于激活狀態的屬性

4.要實現服務端路由，只需要在Express中間件加上一個匹配路由的函數，并在其回調中進行渲染即可

二十一、多頁面下的異步操作

1.redux-amrc封裝了Redux中的重復性異步操作，只需要將Promise和key值傳給redux-amrc，它會完成接下來的所有異步操作

2.在路由組件的onEnter中發起redux-amrc定制的action創建函數，可以實現數據預載

3.在用戶操作所觸發的函數中發起redux-amrc定制的action創建函數，可以實現手動加載數據

4.想要操作redux-amrc中的數據，應該將處理action的reducer組合為對象，然后將該對象作為參數傳入reducerCreator中

二十二、使用Bootstrap

1.bootstrap-loader是一個用來加載Bootstrap的Webpack加載器，使用Sass處理CSS樣式，對于Bootstrap 3&4都能支持

2.PostCSS是一個使用JS插件轉換樣式的工具，Autoprefixer是最流行的PostCSS插件之一

3.React-Bootstrap是一個可利用的前端組件庫，可以通過更簡潔的React組件獲取Bootstrap的外觀和體驗

二十三、搭建大型項目

1.在開發環境中，通常使用開發服務器為程序提供資源服務，實現代碼的熱替換

2.在生產環境下，應該先使用Babel編譯Node.js程序，然后使用node運行

3.在生產環境下，不需要使用開發服務器來提供資源，而是直接將其打包到靜態資源目錄，然后在頁面中引入入口文件即可

關于React與Redux開發的實例分析就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。