React 系列学习—

web native hybird app

React 从哪里来，到哪里去

如果你在看这篇博文前对React一无所知，那就先去脑补一些相关知识吧，至少它

从哪里来，到哪里去？

其实React发源自Facebook的PHP框架XHP的一个分支，XHP作为一个PHP框架，旨在有请求进来时渲染真个页面。React的产生就是为了把这种重新渲染整个页面的PHP式工作流带到客户端应用中来。

React只关系两件事:

更新DOM
响应事件

React不是MVC框架，如果非要问它是哪一个，它就是”V”。我们都都知道，当状态改变时，使用JavasSript重新渲染整个页面会异常的慢，这应归咎于读取和更新DOM的性能问题，记得在另一篇博文使用ionic,cordova,angularJS 搭建webApp中我曾提到过的Ionic性能的问题。React的出现就很好的解决了这一问题。React运用一个Virtual DOM实现非常强大的渲染系统，在React中对DOM只更新不读取。看起来好像跟上面提到的使用JavasSript重新渲染整个页面没什么两样，但是React就是这么做的，但是它使用了非常高效的算法，计算出虚拟页面当前版本和新版本之间的差异，基于这些差异碎DOM进行必要的最少更新。

React赢就赢在最小化了重绘（关于重绘和重排请自行脑补），并避免了不必要的DOM操作，这两点是公认的性能瓶颈。

JSX 是个什么鬼

JSX即JavaScript XML，是用来在React组件内部构建标签的XML语法。 React使用JSX语法，是Facebook为React写的语法糖，但是JSX并不是必须的，毕竟最后JSX仍然要替换成原生的JavaScript才能被浏览器识别。就想CoffeeScript、TypeScript一样需要转换成JavaScript。只不过使用JSX可以提高组件的可读性，而这种可读性不进会给开发人员带来开发的方便，也会为team里的非开发人员（UI、UX等）带来便捷。并且日益强大的使用JSX开发的组件库无疑成为最大的诱惑。

总结一下：React使用JSX，就好比AngularJS 2.0 使用TypeScript。（也许类比的有些不完美）

//react v0.12 JavaScript原生写法
render: function() {
    return React.createElement('div',
        {className: "style-class"},
        "Some Text",
        React.createElement('hr')
    );
}

//JSX 写法
render: function() {
    return  <div className="style-class">
                Some Text<hr/>
            </div>
}

我想通过上面的代码多少可以看到JSX的有点：更加语义化 更加直观。

自定义组件

我们的页面无非就是一个有一个组件拼装起来的，那么接下来就来学习如何自定义React Component。上一节那段代码也算是一个Component，但是其中使用的”style-class”,”Some Text”都是常量，是一个一次性的组件。那么怎么在组件中使用变量呢？还是先看代码：

<!-- 使用下面创建的组件 Divider是组件的名字 -->
<Divider>sss</Divider>

var Divider = React.createClass({
    
});