对React的理解

随着Facebook开源了React Native for Android，React的前景彷佛更加光明。它从最先的UI框架慢慢演变成了一套web应用的解决方案，而且它衍生出来的React Native更是承载着宏伟的目标：learn once, write anywhere。这对前端来讲彷佛是种不可抗拒的吸引力。 

React有三个关键词：

- Just the ui
- virtual dom
- data flow

要理解React，我从它的这三个关键词入手。

2.1 Just the ui

React 负责UI层面的展示，尽管不少人用React做[MVC]架构中的View层,但这并非React的本意。

通常的状况下，咱们在开发过程当中，一般会使用模板或者直接使用HTML来构建UI，而HTML是静态的，使用模板在大多数状况下是能够知足需求的，可是在复杂的逻辑情境中就显得有些吃力了，过多的if else或者逻辑控制在模板里，都会让代码变得难以维护，固然这仍是说整个项目中使用统一的模板的状况下。

React换了一种思路解决问题，它把UI拆分红组件，而不是经过模板引擎和展现逻辑，使得它能够易于拓展和维护。所以它引入了JSX这种语法规则，可让咱们使用相似HTML的语法去写js的函数调用。

2.2 virtual dom

浏览器渲染页面的通常过程一般是这样的：

1 加载html->生成DOM树->解析css生成Render树->生成页面

 那么React的virtual dom是怎么作的呢？

1 生成virtual dom->diff->必要的DOM更新

在这里面大部分的操做放在js中去完成，由于咱们都知道dom操做是很昂贵的。因此在通常的状况下React的性能仍是很不错的。

2.3 data flow

React中的数据流是沿着组件树从上到下单向流动的。

这里的data flow指的是一种应用架构的实现方式，好比说，数据存放在哪里，在哪里触发事件，如何响应用户操做。它不是React提供的什么新功能，应该是React构建应用的实践。咱们理解了以后的Flux或许就更加容易理解data flow这个概念了。

2.4 Flux overview

Flux是facebook配套React强推的一种应用架构思想。它利用数据的单向流动为React的可复用的视图组件提供了补充。

与React的数据流动方式相同，在Flux架构中，数据也是单向流动的：

简单的说，全部的数据流动都会通过Dispatcher。Action能够经过action creator产生并被提供给dispatcher，但多数状况下action是经过用户与views的交互产生。

在View层捕获用户的交互，产生一个Action，经过触发注册在Dispatcher上面的事件回调，使得相关的Store响应Action，而后会触发到Store上面的onChange事件，进一步的更新View。

数据流动也始终是如上图所示的单向流动的。

实践了这个例子：[thinking in react]会对理解React的基本工做原理有很好地帮助。