标签：
前端框架多如牛毛的今天，团队的技术选型很重要，没有最好的，只有最合适的，这话早已经被说烂了。
但是作为一个有追求的前端，对新技术的敏感以及尝试心理还是要有的。
虽然React已经火的不行了，但由于自己的惰性，好吧，就是懒，看了很多的技术文章，但是一直没有开始去学习这个框架。
今天就开始这个框架的学习吧 - -。。。也作为本博第一篇文章。。。
前言
React中，把一切东西都看成组件，每个组件都有其状态。
一个组件与多种有限状态，但同时只能有一个状态。学术上这叫有限状态机
对于HTML而言，React抛弃了他。
抛弃HTML，另起炉灶的原因之一是性能问题：DOM操作十分缓慢。
因此React引入了虚拟DOM（Virtual Dom）的概念，React在必要的时候，才把他们渲染到真正的DOM中
开始
既然选择了开始，那当然是熟悉的味道，原来的配方： Hello World
上手React十分简单，我们只要：在虚拟DOM上创建元素，把他们渲染到真实DOM上
创建元素：createElement( type, [props], [children..] )
type: 创建的元素类型，可以是 字符串 或者 一个React组件类型，为字符串的时候，只能是标准的HTML标签名称，如p, div
props: 可选的JSON对象，指定元素的附加属性，如样式，CSS类名等，CSS类名要用className，而不是用class，因为class是JS保留字。可设置成null。
children：从第三个参数开始，都被认为是子元素
下面是简单的例子：
1 var el = React.createElement(
2 "ul",
3 null,
4 React.createElement("li",null,"China"),
5 React.createElement("li",null,"Japan"),
6 React.createElement("li",null,"Korea")
7 );
渲染到DOM：render( element, container, [cb] )
element：指我们用React创建的虚拟DOM
container：真实的DOM元素，容器。
cb：渲染完成或更新后的回调，可选。
虚拟DOM
虚拟DOM是React的基石。
一方面是性能原因，React每次渲染的时候，会先比较当前DOM内容和渲染内容的差异，然后最优的更新DOM，这个过程叫做reconciliation。
另一方面：引入虚拟DOM，提供了一种一致的开发方式来开发服务端应用，Web应用，手机端应用。
因为有了虚拟DOM，通过配置不同的渲染器，就可以将Virtual Dom的内容渲染到不同的平台。对于开发者，使用JS通吃所有平台。
例子：
我们来实现一个计时器：
1 <script>
2 //获取初始时间
3 var t0 = new Date().getTime();
4
5 //16ms定时器
6 setInterval(function(){
7 //获取当前时间，计算已运行时长
8 var t = new Date().getTime(),
9 delta = t - t0;
10
11 var el = React.createElement(‘p‘, null, delta);
12
13 React.render(el, document.querySelector(‘#content‘))
14 },16);
15 </script>
React组件
定义一个组件十分简单：React.createClass(meta)
meta：是一个实现 预定义接口 的JS对象，用来对React组件原型进行扩展
注意：组件名称的首字母应当 大写。
创建完组件，然后就是之前的流程，创建虚拟DOM，然后渲染。
createClass中一般就写render方法，render方法要返回创建的虚拟DOM
一个例子：
JSX轮子
React引入了Virtual Dom, 创建DOM数需要在JS中写代码，使得界面定义很繁琐，比如创建两排字的组件：
render: function(){
return React.createElement(
"div",null,
React.createElement("div",{className:"ez-led"},"Hello, React!"),
React.createElement("div",{className:"ez-led"},"2015-04-15")
);
}
为了解决上面的问题，JSX来了。
JSX是对JS语法的拓展，它可以让我们在JS代码中类似写HTML的方式创建React元素
注意： CSS类名还是要用className，React.render中的组件名要写成标签形式，如<EzLedComp/>
如：
1 //JavaScript
2 var e = React.createElement(
3 "ul",null,
4 React.createElement("li",null,"China"),
5 React.createElement("li",null,"Japan"),
6 );
7 //JSX = JavaScript + XML like extension
8 var e = <ul>
9 <li>China</li>
10 <li>Japan</li>
11 </ul>;
这样，createElement的部分代码就用了JSX表示，不过，这种写法看起来有点....，当然，可以也选择不用JSX。
对于使用了JSX的脚本，script的类型需要指定为text/jsx
1 //内联脚本
2 <script type="text/jsx">...</script>
3 //外部脚本
4 <script src="a.js" type="text/jsx"></script>
而且需要引入JSX转换库， JSXTransform.js 。 这个库加载后，将在DOM树构建完成后，（即监听了DOMContentLoaded事件），处理JSX脚本，步骤大体如下：
- 搜索DOM中的script标签，且标签类型为text/jsx的
- 读取该script内容，转换成JS语法代码
- 构建一个新的script，转换后的代码写入script，将该script插入head中
引入了JSXTransform.js后，在全局变量中会提供一个JSXTrasnform这个API接口，我们可以用transform() 方法模拟转换的过程
React.js初探（一）
标签：
原文地址：http://www.cnblogs.com/galenyip/p/4573560.html
