React與Redux開發(fā)的實(shí)例分析

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

一、技術(shù)簡(jiǎn)介

1.React是一個(gè)聲明式、高效、靈活的、創(chuàng)建用戶界面的JavaScript庫(kù)

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

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

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

2.Universal渲染：一套代碼可以同時(shí)在服務(wù)端和客戶端渲染

3.Redux是一個(gè)JavaScript狀態(tài)容器，提供可預(yù)測(cè)的狀態(tài)管理，三條基本原則：

• 單一數(shù)據(jù)源：整個(gè)應(yīng)用的state被存儲(chǔ)在一棵對(duì)象樹中，并且這個(gè)對(duì)象樹只存在于唯一一個(gè)store中

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

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

4.Redux的收益：可預(yù)測(cè)、便于組織管理代碼、支持Universal渲染、優(yōu)秀的擴(kuò)展能力、容易測(cè)試、開發(fā)工具、社區(qū)和生態(tài)系統(tǒng)

二、在Node.js中運(yùn)行React

1.Require Hook是Babel的一個(gè)內(nèi)建工具，用于在測(cè)試環(huán)境下編譯運(yùn)行Node.js程序

三、在瀏覽器中運(yùn)行React

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

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

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

四、開發(fā)服務(wù)器和熱替換

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

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

3.webpackHotMiddleware：熱替換

五、React的創(chuàng)新語法：JSX

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

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

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

4.注釋寫在{}內(nèi)

5.數(shù)組會(huì)自動(dòng)展開所有成員，但是如果數(shù)組或迭代器中的每一項(xiàng)都是HTML標(biāo)簽或組件，那么它們必須要擁有唯一的key屬性

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

六、React的數(shù)據(jù)載體：state、props與context

1.State：應(yīng)該被稱為內(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)配合就可以實(shí)現(xiàn)一些用戶交互功能

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

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

七、React的兩個(gè)對(duì)象：ReactElement與組件實(shí)例

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

2.對(duì)一個(gè)組件而言，props就是輸入，ReactElement就是輸出

3.Refs是一個(gè)特殊的屬性，可以是一個(gè)回調(diào)函數(shù)，也可以是一個(gè)字符串

4.組件實(shí)例的生滅：

• componentWillMount在渲染前后調(diào)用

• componentDidMount在每一次渲染后調(diào)用

• componentWillReceiveProps在組件接收到一個(gè)新的prop時(shí)被調(diào)用，在第一次渲染時(shí)不會(huì)被調(diào)用

• shouldComponentUpdat返回一個(gè)布爾值。在組件接收到新的props或者state時(shí)調(diào)用

• componentWillUpdate在組件接收到新的props或者state但還沒有render時(shí)被調(diào)用，在初始化時(shí)不會(huì)被調(diào)用

• componentDidUpdate在組件完成更新后立即調(diào)用，在初始化時(shí)不會(huì)被調(diào)用

• componentWillUnmount在組件從DOM中移除的時(shí)候立刻被調(diào)用

5.React組件生命周期函數(shù)中的this指向組件實(shí)例，自定義組件方法的this會(huì)因“調(diào)用者”不同而不同，為了在組件的自定義方法中獲取組件實(shí)例，需要手動(dòng)綁定this到組件實(shí)例

八、初識(shí)Redux

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

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

3.純函數(shù)不能訪問外部變量，它能接觸的“外地人”只有來自外部的參數(shù)，純函數(shù)不能修改參數(shù)，因?yàn)檫@樣做可能會(huì)把一些信息通過輸入?yún)?shù)，夾帶到外界

4.Action是個(gè)JavaScript對(duì)象，它是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對(duì)象，而是返回一個(gè)函數(shù)

2.Action創(chuàng)建函數(shù)就是創(chuàng)建action的函數(shù)，如果要發(fā)起action創(chuàng)建函數(shù)，只需要將其返回結(jié)果傳給dispatch()

十、React與Redux的連接：手動(dòng)連接

1.手動(dòng)連接兩個(gè)明顯的缺點(diǎn)：無法直接向里面的組件傳遞state和方法；任意state的變化都會(huì)導(dǎo)致整個(gè)組件樹的重新渲染，沒有優(yōu)化性能

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

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

1.使用react-redux

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

3.connect是一個(gè)嵌套函數(shù)，運(yùn)行后，會(huì)生成一個(gè)高階組件（Higher-order Components），接受一個(gè)組件作為參數(shù)再次運(yùn)行，會(huì)生成一個(gè)新組件

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

十二、實(shí)現(xiàn)撤銷/重做

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

2.Redux并不低效，它給我們帶來了清晰的狀態(tài)管理和非常好的開發(fā)體驗(yàn)

十三、測(cè)試

1.測(cè)試工具：

• Mocha：只需要在Mocha提供的全局函數(shù)（比如describe、it）中編寫測(cè)試并運(yùn)行，就可以生成精美的測(cè)試報(bào)告

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

• Expect：斷言庫(kù)，提供了常用的斷言函數(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指的是組件實(shí)例）

2.理想狀態(tài)下，程序的所有數(shù)據(jù)都應(yīng)該放在Redux的全局狀態(tài)中

3.如果一些狀態(tài)只在一個(gè)組件內(nèi)部臨時(shí)使用，也可以使用組件的內(nèi)部狀態(tài)

十五、React與Redux中的數(shù)組處理

1.都是JS的語法

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

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

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

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

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

7.展開運(yùn)算符允許一個(gè)表達(dá)式某處展開，常用的場(chǎng)景包括：函數(shù)參數(shù)、數(shù)組元素、解構(gòu)賦值

十六、Redux的大舞臺(tái)：異步

1.JS是一門事件驅(qū)動(dòng)編程語言，如果為特定事件注冊(cè)了一段代碼，這段代碼將會(huì)在事件被觸發(fā)時(shí)執(zhí)行，正是事件驅(qū)動(dòng)這個(gè)特性讓JS可以執(zhí)行異步代碼，而不會(huì)阻塞后面程序的運(yùn)行

2.Promise是處理異步的優(yōu)秀方案，它不僅可以通過鏈?zhǔn)讲僮鲙椭覀償[脫回調(diào)地獄，還可以在鏈?zhǔn)讲僮鬟^程中的任何時(shí)刻捕捉異常

3.Redux只能實(shí)現(xiàn)同步操作，但是可以通過Thunk中間件實(shí)現(xiàn)異步

十七、自定義Redux中間件

1.自定義Redux中間件只需要編寫一個(gè)三層的嵌套函數(shù)

2.一個(gè)異步請(qǐng)求通常需要編寫三個(gè)action，分別在開始請(qǐng)求、請(qǐng)求成功和請(qǐng)求失敗時(shí)被發(fā)起

十八、Universal渲染

1.預(yù)載數(shù)據(jù)指的是在服務(wù)端準(zhǔn)備好數(shù)據(jù)后再渲染頁面，這樣瀏覽器接收到的才是攜帶數(shù)據(jù)的頁面。如果在客戶端請(qǐng)求數(shù)據(jù)，則往往會(huì)出現(xiàn) “閃屏”問題

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

十九、Universal渲染神器：Webpack同構(gòu)工具

1.從本質(zhì)上來說，Universal渲染就是服務(wù)端與客戶端環(huán)境相互模擬的技術(shù)

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

二十、多頁面的實(shí)現(xiàn)：路由

1.路由本質(zhì)上只是一個(gè)多重視圖的組件

2.配置路由匹配信息，可以告訴路由如何根據(jù)URL來運(yùn)行和顯示相應(yīng)的組件

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

4.要實(shí)現(xiàn)服務(wù)端路由，只需要在Express中間件加上一個(gè)匹配路由的函數(shù)，并在其回調(diào)中進(jìn)行渲染即可

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

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

2.在路由組件的onEnter中發(fā)起redux-amrc定制的action創(chuàng)建函數(shù)，可以實(shí)現(xiàn)數(shù)據(jù)預(yù)載

3.在用戶操作所觸發(fā)的函數(shù)中發(fā)起redux-amrc定制的action創(chuàng)建函數(shù)，可以實(shí)現(xiàn)手動(dòng)加載數(shù)據(jù)

4.想要操作redux-amrc中的數(shù)據(jù)，應(yīng)該將處理action的reducer組合為對(duì)象，然后將該對(duì)象作為參數(shù)傳入reducerCreator中

二十二、使用Bootstrap

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

2.PostCSS是一個(gè)使用JS插件轉(zhuǎn)換樣式的工具，Autoprefixer是最流行的PostCSS插件之一

3.React-Bootstrap是一個(gè)可利用的前端組件庫(kù)，可以通過更簡(jiǎn)潔的React組件獲取Bootstrap的外觀和體驗(yàn)

二十三、搭建大型項(xiàng)目

1.在開發(fā)環(huán)境中，通常使用開發(fā)服務(wù)器為程序提供資源服務(wù)，實(shí)現(xiàn)代碼的熱替換

2.在生產(chǎn)環(huán)境下，應(yīng)該先使用Babel編譯Node.js程序，然后使用node運(yùn)行

3.在生產(chǎn)環(huán)境下，不需要使用開發(fā)服務(wù)器來提供資源，而是直接將其打包到靜態(tài)資源目錄，然后在頁面中引入入口文件即可

關(guān)于React與Redux開發(fā)的實(shí)例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。