一、Chrome擴(kuò)展包
1、React-Developer-Tools
檢視React組件的樹形結(jié)構(gòu)。
下載地址:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
2、Redux-DevTools
檢視Redux數(shù)據(jù)流,可以將Store狀態(tài)跳躍到任何一個(gè)歷史狀態(tài),也就是所謂的“時(shí)間旅行”功能。
下載地址:https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
3、React-Perf
可以發(fā)現(xiàn)react組件渲染的性能問題
下載地址:https://chrome.google.com/webstore/detail/react-perf/hacmcodfllhbnekmghgdlplbdnahmhmm
二、Redux輔助及中間件
1、redux-immutable-state-invariant
在Redux項(xiàng)目中,有一個(gè)規(guī)則,每一個(gè)reducer函數(shù)都必須是一個(gè)純函數(shù),不能修改傳入的參數(shù)state和action。但是只靠開發(fā)人員去遵守這個(gè)規(guī)則,并不可靠,因?yàn)橐?guī)則總是會(huì)被無心違反的。
redux-immutable-state-invariant包,提供了一個(gè)Redux中間件,它能夠讓Redux在每次派發(fā)動(dòng)作之后做一個(gè)檢查。如果發(fā)現(xiàn)某個(gè)reducer違反了作為一個(gè)純函數(shù)的規(guī)定,擅自修改了state,就會(huì)給一個(gè)大大的錯(cuò)誤警告,從而讓開發(fā)者意識(shí)到自己犯了一個(gè)錯(cuò)誤,必須要修正。
npm install --save-dev redux-immutable-state-invariant
注意:redux-immutable-state-invariant這種檢查在開發(fā)環(huán)境很有用,但是在產(chǎn)品環(huán)境下,這樣的出錯(cuò)提示沒有意義。畢竟用戶不會(huì)去關(guān)心什么錯(cuò)誤提示,用戶也看不懂。況且這種檢查不僅要消耗計(jì)算資源,javaScript代碼體積也會(huì)增大。所以我們通常在產(chǎn)品環(huán)境中不啟用redux-immutable-state-invariant。
2、reselect
reselect庫是Redux的一個(gè)中間件,是一個(gè)簡(jiǎn)單的Redux庫。reselect中使用了緩存機(jī)制,它要解決的問題是:“在組件交互操作的時(shí)候,state發(fā)生變化的時(shí)候如何減少渲染的壓力”。
npm install --save reselect
雖然reselect庫以re開頭,但是邏輯上和React/Redux沒有直接關(guān)系,實(shí)際上,在任何需要這種具有記憶的計(jì)算場(chǎng)合都可以使用reselect,不過,對(duì)于React和Redux組合的應(yīng)用,reselect無疑能提供絕佳的支持。
3、redux-thunk
thunk是基于redux副作用邏輯的推薦中間件,包括需要訪問存儲(chǔ)的復(fù)雜同步邏輯,以及像AJAX請(qǐng)求這樣的簡(jiǎn)單異步邏輯。
redux-thunk中間件允許您編寫返回函數(shù)而不是動(dòng)作的動(dòng)作創(chuàng)建者。thunk可用于延遲動(dòng)作的發(fā)送,或僅在滿足某個(gè)條件時(shí)發(fā)送。內(nèi)部函數(shù)接收存儲(chǔ)方法dispatch
和getState
參數(shù)。
npm install --save redux-thunk
缺點(diǎn):reducer返回結(jié)果用純函數(shù)方式對(duì)服務(wù)器訪問,而執(zhí)行訪問資源的操作將由reducer調(diào)用者去執(zhí)行。
4、redux-saga
redux-saga 是一個(gè)旨在使應(yīng)用程序副作用(即異步事物,如數(shù)據(jù)獲取和不純的東西,如訪問瀏覽器緩存)更容易管理,執(zhí)行更高效,易于測(cè)試,以及更好地處理故障的庫。
心理模型是一個(gè)saga就像你的應(yīng)用程序中的一個(gè)單獨(dú)的線程,它獨(dú)自負(fù)責(zé)副作用。redux-saga是一個(gè)用于管理redux應(yīng)用異步操作的中間件,這意味著可以使用正常的redux操作從主應(yīng)用程序啟動(dòng),暫停和取消此線程,它可以訪問完整的redux應(yīng)用程序狀態(tài),也可以調(diào)度redux操作。
redux-saga與redux-thunk相反,你最終沒有回調(diào)地獄,你可以輕松地測(cè)試你的異步流程,你的行動(dòng)保持純粹。
npm install --save redux-saga
缺點(diǎn):體積大,要求開發(fā)這能理解ES6、async和await語法。
5、利用promise實(shí)現(xiàn)異步操作中間件
a、redux-promise
b、redux-promises(redux-promises
向后兼容redux-thunk
)
c、redux-simple-promise
d、redux-promise-middleware
6、其他redux處理異步的中間件
a、redux-effects
b、redux-side-effects
c、redux-loop
d、redux-observable
三、單元測(cè)試
1、Mocha
Mocha是流行的JavaScript測(cè)試框架之一,通過它添加和運(yùn)行測(cè)試,從而保證代碼質(zhì)量
npm install -g mocha
npm install --save-dev mocha
2、Chai.js斷言庫
Chai是一個(gè)可以在node和瀏覽器環(huán)境運(yùn)行的BDD/TDD斷言庫,可以和任何JavaScript測(cè)試框架結(jié)合。
npm install chai
BDD(Behavior Driven Development行為驅(qū)動(dòng)開發(fā))
是一種敏捷軟件開發(fā)的技術(shù),它鼓勵(lì)軟件項(xiàng)目中的開發(fā)者、QA和非技術(shù)人員或商業(yè)參與者之間的協(xié)作
TDD(Test Driven Development測(cè)試驅(qū)動(dòng)開發(fā))
測(cè)試先于編寫代碼的思想,用于指導(dǎo)軟件開發(fā)
3、jest
jest 是facebook推出的一款測(cè)試框架,集成了 Mocha,chai,jsdom,sinon等功能。
npm install -g jest
npm install --save-dev jest
4、Enzyme
Enzyme是React的JavaScript測(cè)試實(shí)用程序,可以更輕松地測(cè)試React Components的輸出。您還可以在給定輸出的情況下操縱,遍歷并以某種方式模擬運(yùn)行時(shí)
5、Sinon.js
獨(dú)立和測(cè)試框架無關(guān)的JavaScript測(cè)試間諜
pm install sinon
6、redux-mock-store
用于測(cè)試redux異步操作創(chuàng)建器和中間件的模擬存儲(chǔ)。模擬存儲(chǔ)將創(chuàng)建一個(gè)調(diào)度操作數(shù)組,用作測(cè)試的操作日志。
npm install redux-mock-store --save-dev
四、react動(dòng)畫
1、react-motion
它是一個(gè)react動(dòng)畫庫
npm install --save react-motion
2、react-addons-css-transition-group
react-addons-css-transition-group插件,就是利用css的transition和animation實(shí)現(xiàn)組件的進(jìn)場(chǎng)和出場(chǎng)動(dòng)畫的。ReactCSSTransitionGroup是在ReactTransitionGroup的基礎(chǔ)上進(jìn)行再封裝。
五、EJS高效的 JavaScript 模板引擎
"E" 代表 "effective",即【高效】。EJS 是一套簡(jiǎn)單的模板語言,幫你利用普通的 JavaScript 代碼生成 HTML 頁面。EJS 沒有如何組織內(nèi)容的教條;也沒有再造一套迭代和控制流語法;有的只是普通的 JavaScript 代碼而已。
六、Express
1、Express
基于 Node.js平臺(tái),快速、開放、極簡(jiǎn)的 Web 開發(fā)框架
npm install express --save
七、Webpack
1、webpack-dev-middleware
webpack-dev-middleware就是,生成一個(gè)與webpack的compiler綁定的中間件,然后在express啟動(dòng)的服務(wù)app中調(diào)用這個(gè)中間件。
其作用簡(jiǎn)單總結(jié)為以下三點(diǎn):通過watch mode,監(jiān)聽資源的變更,然后自動(dòng)打包(如何實(shí)現(xiàn),見下文詳解)、快速編譯,走內(nèi)存、返回中間件,支持express的use格式。
npm install webpack-dev-middleware --save-dev
注意:此模塊至少需要Node v6.9.0和Webpack v4.0.0,并且必須與接受快速中間件的服務(wù)器一起使用。不建議全局安裝此模塊。
2、webpack-hot-middleware
僅使用webpack-dev-middleware進(jìn)行Webpack熱重裝。這允許您在沒有webpack-dev-server的情況下將熱重新加載添加到現(xiàn)有服務(wù)器中。
npm install --save-dev webpack-hot-middleware
3、react-hot-loader
react-hot-loader是react組件的熱加載。但是webpack-dev-server已經(jīng)是熱加載,為何還要在 react 項(xiàng)目還要安裝 react-hot-loader 呢?
其實(shí)這兩者的更新是有區(qū)別的,webpack-dev-server 的熱加載是開發(fā)人員修改了代碼,代碼經(jīng)過打包,重新刷新了整個(gè)頁面。而 react-hot-loader 不會(huì)刷新整個(gè)頁面,它只替換了修改的代碼,做到了頁面的局部刷新。
npm install --save-dev react-hot-loader