一、Chrome扩展包
1、React-Developer-Tools
检视React组件的树形结构。
下载地址：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
2、Redux-DevTools
检视Redux数据流，可以将Store状态跳跃到任何一个历史状态，也就是所谓的“时间旅行”功能。
下载地址：https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
3、React-Perf
可以发现react组件渲染的性能问题
下载地址：https://chrome.google.com/webstore/detail/react-perf/hacmcodfllhbnekmghgdlplbdnahmhmm
二、Redux辅助及中间件
1、redux-immutable-state-invariant
在Redux项目中，有一个规则，每一个reducer函数都必须是一个纯函数，不能修改传入的参数state和action。但是只靠开发人员去遵守这个规则，并不可靠，因为规则总是会被无心违反的。
redux-immutable-state-invariant包，提供了一个Redux中间件，它能够让Redux在每次派发动作之后做一个检查。如果发现某个reducer违反了作为一个纯函数的规定，擅自修改了state，就会给一个大大的错误警告，从而让开发者意识到自己犯了一个错误，必须要修正。
npm install --save-dev redux-immutable-state-invariant
注意：redux-immutable-state-invariant这种检查在开发环境很有用，但是在产品环境下，这样的出错提示没有意义。毕竟用户不会去关心什么错误提示，用户也看不懂。况且这种检查不仅要消耗计算资源，javaScript代码体积也会增大。所以我们通常在产品环境中不启用redux-immutable-state-invariant。
2、reselect
reselect库是Redux的一个中间件，是一个简单的Redux库。reselect中使用了缓存机制，它要解决的问题是：“在组件交互操作的时候，state发生变化的时候如何减少渲染的压力”。
npm install --save reselect
虽然reselect库以re开头，但是逻辑上和React/Redux没有直接关系，实际上，在任何需要这种具有记忆的计算场合都可以使用reselect，不过，对于React和Redux组合的应用，reselect无疑能提供绝佳的支持。
3、redux-thunk
thunk是基于redux副作用逻辑的推荐中间件，包括需要访问存储的复杂同步逻辑，以及像AJAX请求这样的简单异步逻辑。
redux-thunk中间件允许您编写返回函数而不是动作的动作创建者。thunk可用于延迟动作的发送，或仅在满足某个条件时发送。内部函数接收存储方法dispatch和getState参数。
npm install --save redux-thunk
缺点：reducer返回结果用纯函数方式对服务器访问，而执行访问资源的操作将由reducer调用者去执行。
4、redux-saga
redux-saga 是一个旨在使应用程序副作用（即异步事物，如数据获取和不纯的东西，如访问浏览器缓存）更容易管理，执行更高效，易于测试，以及更好地处理故障的库。
心理模型是一个saga就像你的应用程序中的一个单独的线程，它独自负责副作用。redux-saga是一个用于管理redux应用异步操作的中间件，这意味着可以使用正常的redux操作从主应用程序启动，暂停和取消此线程，它可以访问完整的redux应用程序状态，也可以调度redux操作。
redux-saga与redux-thunk相反，你最终没有回调地狱，你可以轻松地测试你的异步流程，你的行动保持纯粹。
npm install --save redux-saga
缺点：体积大，要求开发这能理解ES6、async和await语法。
5、利用promise实现异步操作中间件
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
三、单元测试
1、Mocha
Mocha是流行的JavaScript测试框架之一，通过它添加和运行测试，从而保证代码质量
npm install -g mocha
npm install --save-dev mocha
2、Chai.js断言库
Chai是一个可以在node和浏览器环境运行的BDD/TDD断言库，可以和任何JavaScript测试框架结合。
npm install chai
BDD（Behavior Driven Development行为驱动开发）
是一种敏捷软件开发的技术，它鼓励软件项目中的开发者、QA和非技术人员或商业参与者之间的协作
TDD（Test Driven Development测试驱动开发）
测试先于编写代码的思想，用于指导软件开发
3、jest
jest 是facebook推出的一款测试框架，集成了 Mocha，chai，jsdom，sinon等功能。
npm install -g jest
npm install --save-dev jest
4、Enzyme
Enzyme是React的JavaScript测试实用程序，可以更轻松地测试React Components的输出。您还可以在给定输出的情况下操纵，遍历并以某种方式模拟运行时
5、Sinon.js
独立和测试框架无关的JavaScript测试间谍
pm install sinon
6、redux-mock-store
用于测试redux异步操作创建器和中间件的模拟存储。模拟存储将创建一个调度操作数组，用作测试的操作日志。
npm install redux-mock-store --save-dev
四、react动画
1、react-motion
它是一个react动画库
npm install --save react-motion
2、react-addons-css-transition-group
react-addons-css-transition-group插件，就是利用css的transition和animation实现组件的进场和出场动画的。ReactCSSTransitionGroup是在ReactTransitionGroup的基础上进行再封装。
五、EJS高效的 JavaScript 模板引擎
"E" 代表 "effective"，即【高效】。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。
六、Express
1、Express
基于 Node.js平台，快速、开放、极简的 Web 开发框架
npm install express --save
七、Webpack
1、webpack-dev-middleware
webpack-dev-middleware就是，生成一个与webpack的compiler绑定的中间件，然后在express启动的服务app中调用这个中间件。
其作用简单总结为以下三点：通过watch mode，监听资源的变更，然后自动打包（如何实现，见下文详解)、快速编译，走内存、返回中间件，支持express的use格式。
npm install webpack-dev-middleware --save-dev
注意：此模块至少需要Node v6.9.0和Webpack v4.0.0，并且必须与接受快速中间件的服务器一起使用。不建议全局安装此模块。
2、webpack-hot-middleware
仅使用webpack-dev-middleware进行Webpack热重装。这允许您在没有webpack-dev-server的情况下将热重新加载添加到现有服务器中。
npm install --save-dev webpack-hot-middleware
3、react-hot-loader
react-hot-loader是react组件的热加载。但是webpack-dev-server已经是热加载，为何还要在 react 项目还要安装 react-hot-loader 呢？
其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。
npm install --save-dev react-hot-loader
网友评论