说一说 React 和 Redux 你知道或者不知道的一些事情

本文介绍一下本身在使用React和Redux过程当中的一些思考，主要面向初学者。

1. 为何要有redux

传统前端开发中，把模板和功能逻辑分开做为一种最佳实践，React采用了不一样的思路，经过组件把模板和逻辑组合在一块儿。可是React也并非一个完整的组件化框架，其组件化只是主要集中在展现层面，若是要构建复杂的应用，在React component中放置太多的逻辑代码，不只组件化的初衷复用性会下降，从代码维护的角度看也不合理。

Flux是Facebook提出的一种前端架构模式，经过Flux的数据流模型能够很是优雅地处理应用中的数据流动，配合其余中间件使用能够处理复杂应用中的逻辑行为，从而提升代码的复用性和维护性。其中Redux是全部Flux具体实现中的一个佼佼者。

2. react redux工程化

这里说一下在react、redux开发中可能会用到的一些方便开发的工具和值得研究的第三方库。

react-redux

react-redux经过Provider和connect两个接口简化了react component与redux的绑定，几乎是必用的一个库。

redux devtools

可使用chrome的Redux DevTools插件，redux devtools功能很是强大，能够查看store state和action的内容，并且是能够查看全部阶段的store中的数据，甚至撤销或者从新执行action，站在绝对的上帝视角，能够帮助咱们快速定位逻辑上的问题。

react-addons-perf

react-addons-perf是一个性能分析工具，能够打印react component的渲染时间，还能够分析组件渲染过程当中浪费的时间，即执行了render方法，而没有在dom上更新的地方，从而发现component中能够优化的环节。

react-addons-update

react-addons-update能够方便地建立不可变数据。咱们知道为了性能优化中会使用shouldComponentUpdate方法来避免render无心义调用，可是shouldComponentUpdate自己的执行也不能过于复杂，不然反而是增长了执行时间，因此shouldComponentUpdate在对比oldprops和nextprops时通常使用浅对比（shallow compare）。这时若是是对可变对象进行浅比较，结果天然是不许确的，所以须要使用不可变对象，react-addons-update正能够知足这种需求。

redux-logger

能够在console中输出每个action dispatch后state的变化，是代码调试的好帮手。

redux-saga

经过使用generator能够优雅地处理异步过程，而且可测试性强。

3. react性能优化的建议

网上已经有不少react性能优化的文章，我的以为性能优化自己是一个博弈的过程，在代码可读性、维护性与运行性能之间的博弈，不少时候性能优化牺牲了代码的可读性，所以要在合适的时间，在需求基本完成时再进行优化，而且优化中要着眼于性能的瓶颈，没有必要深挖每个细节，破坏代码自己可读性。

4. React使用中的一些博弈

其实React的出现自己就一个博弈的结果，模板和逻辑的分离仍是组合的一个博弈结果，React采用组件的方式把传统开发中的模板和逻辑放置在了一块儿。在选用React以前须要考虑下是否适合采用React。

shouldComponentUpdate

shouldComponentUpdate的加入是为了不render方法的无效重复执行，可是若是shouldComponentUpdate函数自己会执行比较复杂的对比，那么加入shouldComponentUpdate得不偿失.

redux 博弈

在react中加入redux以后，会尽可能设计"纯"component （即对于传入必定 props必定能够输出肯定的结果），组件间、甚至组件内部的状态变化都要经过action来实现。但有时使用组件内部的state反而是一种最简便快捷的方式。

组件拆分的博弈

组件拆分并非颗粒越小越好，找到一个能够被复用的平衡点便可，拆分过细反而增长了代码的复杂度。

最后

Facebook最近开源了litho，其设计思路与react一模一样。对于Android开发者来讲，也是一个颠覆性的创新。同时litho提到的异步布局、View复用对于开发者来讲也具备很大的吸引力。为了督促本身更新博客，先在这里立个flag。