你的位置:首页 > Java教程

[Java教程]React.js初探(一)


前端框架多如牛毛的今天,团队的技术选型很重要,没有最好的,只有最合适的,这话早已经被说烂了。

但是作为一个有追求的前端,对新技术的敏感以及尝试心理还是要有的。

虽然React已经火的不行了,但由于自己的惰性,好吧,就是懒,看了很多的技术文章,但是一直没有开始去学习这个框架。

今天就开始这个框架的学习吧 - -。。。也作为本博第一篇文章。。。

 
前言
 
React中,把一切东西都看成组件,每个组件都有其状态。
一个组件与多种有限状态,但同时只能有一个状态。学术上这叫有限状态机
 
对于HTML而言,React抛弃了他。
抛弃HTML,另起炉灶的原因之一是性能问题:DOM操作十分缓慢。
因此React引入了虚拟DOM(Virtual Dom)的概念,React在必要的时候,才把他们渲染到真正的DOM中
 
 
开始
既然选择了开始,那当然是熟悉的味道,原来的配方: Hello React 
 
上手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。其他的方法则要写成驼峰式的名字,如onClick。
 
一个例子:

 
 
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 +  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脚本,步骤大体如下:
  1. 搜索DOM中的script标签,且标签类型为text/jsx的
  2. 读取该script内容,转换成JS语法代码
  3. 构建一个新的script,转换后的代码写入script,将该script插入head中
 
引入了JSXTransform.js后,在全局变量中会提供一个JSXTrasnform这个API接口,我们可以用transform() 方法模拟转换的过程