React框架

［http://shan-er.github.io/2015/09/29/react-knowledge/］

终于抽出时间来说说这个react了，Facebook于2013年5月开源的react，时间真的不是很久，当然对于更新换代如此快的前端来说，这个时间其实也不短了。之前一直没有了解过，最近由于项目需要，才开始接触，总体来说，用着不错，挺容易上手。在这里就简要说说我对react的认识。

1.react 原理

随着web开发越来越复杂，对DOM的操作也越来越频繁，而过多的DOM操作严重影响了系统性能，对于如何进行高性能的复杂DOM操作，我们一直在努力…
react的出现给我们提供了一个全新的视角，来处理复杂的界面交互。
借用react官网的说法是：

We built React to solve one problem: building large applications with data that changes over time.

React如此受前端工程师的青睐，主要是因为她非常快；而她之所以如此快，是因为其提供的虚拟DOM。

React并不直接操作浏览器上的DOM元素，而是通过轻量级的虚拟DOM来实现真实的DOM，这是其核心。

根据React的设计，每当数据发生变化时，React就会构建完整的虚拟DOM树，然后React会拿当前的DOM树与之前的DOM树通过diff算法计算出不同的地方，最后只把变动的部分更新到真实的浏览器DOM上。在这里，我们不需要考虑每次构建虚拟DOM所带来的性能影响，因为虚拟DOM是存在在内存中的，性能自然极高。如此，当我们在使用React的时候，就不需要考虑数据变化时，UI是如何变化了；我们只需描述出在某一时刻我们希望看到的样子（Render部分），其他的就交给React吧。
至于React是如何将原来O(n^3)复杂度的Diff算法降低到O(n)的，在这里就先不细说了，只提供一个链接React’s diff algorithm。

2.react 文件

接下来我们就看一下从React官网下载下来的几个文件。

JSXTransformer.js：实现在浏览器中的代码转换，即将jsx代码转化为js。
React-with-addons.js：在React基础上，为构建React apps提供一些有用的插件。例如：用于处理动画和过渡的TransitionGroup和CSSTransitionGroup；用于简化双向数据绑定的LinkedStateMixin等等，等等，具体查看addons。
项目中，在安装react依赖后，可以看到相关文件。

由此，我们可以很清晰的看到，react.js和addons.js。如果我们想使用之前所说的这些插件的话，只需要用require(‘react/addons’)替换require(‘react’)就能得到带有所有插件的React。

3.react 主要内容

3.1 JSX

JSX是一个简单，可选的类似于HTML的语法。可选，就表明我们可以完全不用JSX，使用普通的js就可实现。但只要你用过了jsx，你就会发现这种语法真的非常方便。
JSX的基本原理：自动识别html代码，并且全部转换成React.createElement。注意：JSX区分html代码的方式是，前括号之内并且首字母小写的就是html代码，如果首字母大写则就是react组件。

3.2 Components 组件

DOM树上的节点被称为元素，而在React中，在Virtual DOM上称为component。组件，就是封装起来的具有独立功能的UI部件。对项目来说，整个UI都是由小组件构成的大组件，彼此独立。
[引用] React认为一个组件应该具有如下特征：
（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；
（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

对于React组件，我们可以使用React.createClass进行自定义。

除自定义外，我们也可以选择使用第三方的可重用React组件，如ant design等等。

3.3 props和state

props和state，React提供的两种数据“模型”，使用时需要注意。一般来说，因用户交互需要修改数据时，应该使用state。
props使用getDefaultProps方法设置初始值。state使用getInitialState和setState分别来初始化和修改state。

3.4 render()

render方法，将React的模板转化为HTML,并插入到相应的DOM结构中。
当props或state的值发生变化时，会调用render方法，在React render的时候，会重新生成虚拟DOM，再对虚拟DOM中发生改变的部分进行重新渲染。

4.ReactJS/AngularJs/BackboneJs对比

React官网：http://facebook.github.io/react/docs/getting-started.html
React概览：http://segmentfault.com/a/1190000000693651
ES6 features: https://github.com/lukehoban/es6features
Awesome React：https://github.com/enaqx/awesome-react