初识React
2016-07-10 23:21:06
190
1.基本认识
React是一个用于构建用户界面的JavaScript库，而不是一个MVC框架，但可以使用React作为MVC架构的View层轻易的在已有项目中使用。
2.为什么用React
高效DOM渲染
谈到前端性能优化，减少DOM元素、减少reflow和repaint、编码过程中尽量减少DOM的查询等手段是大家耳熟能详的。而页面任何UI的变化都是通过整体刷新来完成的。幸运的是，React通过自己实现的DOM Diff算法，计算出虚拟页面当前版本和新版本之间的差异，最小化重绘，避免不必要的DOM操作，解决了这两个公认的前端性能瓶颈，实现高效DOM渲染。
- 我们知道，频繁的操作DOM所带来的性能消耗是很大的，而React之所以快，是因为它不直接操作DOM，而是引进虚拟DOM的实现来解决这个问题
- 对于页面的更新，React通过自己实现的DOM Diff算法来进行差异对比、差异更新，反映到页面上就是只重绘了更新的部分，从而提高渲染效率。
组件化
在业务开发中，遇到公共的模板部分，我们不得不将模板和规定的数据格式耦合在一起来实现组件。而在React中，我们可以使用JSX语法来封装组件，将组件的结构、数据逻辑甚至样式都聚合在一起，更加简单、明了、直观的定义组件。
有了组件化的实现，我们可以很直观的将一个复杂的页面分割成若干个独立组件，再将这些独立组件组合完成一个复杂的页面。这样既减少了逻辑复杂度，又实现了代码的重用。
React认为一个组件应该具有如下的特征：
- 可组合：一个组件可以和其他的组件一起使用或者可以直接嵌套在另一个组件内部，通过这样的组合方式，一个复杂的UI组件可以分拆成若干个简单的UI组件
- 可重用：每个组件都是具有独立功能的，它可以被使用在多个UI场景
- 可维护：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护
单向数据流
在React中，数据的流向是从父节点到子节点的单向流动，这样可以使组件简单并且容易把握，因为子节点是无状态的，只需要从父节点获取props渲染即可。这样带来的收益是，顶层组件的某个prop改变了，React就会向下递归遍历整棵组件树，重新渲染所有使用到了这个属性的组件。
单向数据流带来的几个重要的好处是：
- 单向数据流可以很好的完成组件间的数据通信
- 这里的单向，是循环流动的单向，数据是持续更新的。双向数据绑定是优秀便捷的实现，这个需要用实现的成本和业务场景来考量二者了。
- 对于单向数据流目前已经有很好的类库实现了，如flux reflux redux等。
React的优势
React在目前前端技术所表现出的亮点吸引了大批的开发者：
- 从顶到底都是组件，你的应用程序代码非常容易理解
- 学习曲线非常平缓，要知道罗列它所有关键的API都不会超过一页A4纸张。
- JSX非常棒，你可以用获得JavaScript编程语言的能力和工具链来描述页面
- 基于React的项目实现，除了组件化、虚拟DOM等特点在代码复用以及性能上带来的一般好处外，React的思想使得开发者之间可以更好的分工与合作，在配合上非常顺畅。
- 规范的接口以及极强的约束，使得整个代码结构清晰，不同开发者的代码高度一致。
- 技术生态。越来越多的开发调试工具以及JavaScript框架正在依附着react生长，这一技术选型对以后的产品升级以及客户端的开发上线打下了良好的基础。
- 这套技术实现，框架库代码压缩后大于200K,gzip后实际传输大小为60K+，更适合大型的webapp。
- 配合ES6的使用，可以大幅提高编程效率，降低很多之前的代码坑。
- 有很优秀的开源组件库可以使用：
Antd Materialui React-bootstrap Amaze-ui Sematic-ui
学习资料
React还在持续的更新开发中，截至目前React的最新版是0.14.3版本，每一次的更新意味着API的改变亦或是包的拆解，关注版本的更新让你的代码和思想都跟上节奏。
相比于之前的看不懂的官方文档，现在的中文论坛、文档、学习书籍慢慢完善起来了。可以有几个途径去获得相关的资料：
