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

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

虽然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:从第三个参数开始,都被认为是子元素
 
下面是简单的例子:
 
 var el = React.createElement(
  "ul",
  null,
  React.createElement("li",null,"China"),
  React.createElement("li",null,"Japan"),
  React.createElement("li",null,"Korea")
);
渲染到DOM:render( element, container, [cb] )
element:指我们用React创建的虚拟DOM
container:真实的DOM元素,容器。
cb:渲染完成或更新后的回调,可选。
 
 
虚拟DOM
虚拟DOM是React的基石。
一方面是性能原因,React每次渲染的时候,会先比较当前DOM内容和渲染内容的差异,然后最优的更新DOM,这个过程叫做reconciliation。
另一方面:引入虚拟DOM,提供了一种一致的开发方式来开发服务端应用,Web应用,手机端应用。
因为有了虚拟DOM,通过配置不同的渲染器,就可以将Virtual Dom的内容渲染到不同的平台。对于开发者,使用JS通吃所有平台。
 
例子:
我们来实现一个计时器:
 <script>
//获取初始时间
var t0 = new Date().getTime(); //16ms定时器
setInterval(function(){
  //获取当前时间,计算已运行时长
  var t = new Date().getTime(),
  delta = t - t0;   var el = React.createElement('p', null, delta);   React.render(el, document.querySelector('#content'))
},16);
</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/>
 
如:
 //JavaScript
var e = React.createElement(
"ul",null,
React.createElement("li",null,"China"),
React.createElement("li",null,"Japan"),
);
//JSX = JavaScript + XML like extension
var e = <ul>
<li>China</li>
<li>Japan</li>
</ul>;
 
这样,createElement的部分代码就用了JSX表示,不过,这种写法看起来有点....,当然,可以也选择不用JSX。
 
对于使用了JSX的脚本,script的类型需要指定为text/jsx
 //内联脚本
<script type="text/jsx">...</script>
//外部脚本
<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() 方法模拟转换的过程
 
 
 
 
 
 
 
 
 
 
 

React.js初探(一)的更多相关文章

  1. React.js初探

    React.js 菜鸟官方解释: React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源 ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  4. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. React.js深入学习详细解析

    今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定   ...

  7. React.js入门必须知道的那些事

    首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...

  8. React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

    对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...

  9. React.js入门笔记(再续):评论框的实现

    本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...

随机推荐

  1. Linux 环境下 Lua 安装(转)

    系统环境:CentOS-6.2-x86_64. Lua 是嵌入式脚本语言,应用场景很广泛. 引自官网:Lua is used in many products and projects around ...

  2. swift 笔记 (十二) —— 下标

    下标 swift同意我们为 类.结构体,枚举 定义下标,以更便捷的方式訪问一大堆属性.比方Array和Dictionary都是结构体,swift的project师已经为这两个类型提供好了下标操作的代码 ...

  3. Codeforces Round #234 (Div. 2) B. Inna and New Matrix of Candies

    B. Inna and New Matrix of Candies time limit per test 1 second memory limit per test 256 megabytes i ...

  4. 【Android进阶】快捷图标的创建与移除

    注释已经说得很清楚了,如果有疑问,请留言 /** * 添加桌面快捷方式 * * @param view */ public void click1(View view) { if (isExit()) ...

  5. Oracle 重建索引脚本

    该指数是一个有力的武器,以提高数据库的查询性能. 没有索引,喜欢同样的标签库没有书籍,找书,他们想预订比登天还难.中,尤其是在批量的DML的情形下会产生对应的碎片.以及B树高度会发生对应变化.因此能够 ...

  6. UI设计学习路径(一个)—好酒也怕巷子深

    来源 參与米老师对项目的验收的时候.听了老师对UI的看法才注意UI这块内容.非常奇怪为什么我们总是不能注意到本该注意的问题呢?软件开发难道仅仅是功能的实现不包含界面设计吗?当然不是.问题的根源在于我们 ...

  7. FastReport扩展类

    题记: 最近有在用FastReport进行开发报表工作,当然也有在看书,突然想到可以用书中所写来实现一个fastreport的帮助类. 对于引用第三方类库,我们都会去将这个库在调用前进行相应的封装,也 ...

  8. Struts2之—实现自己的结果集的定义ajax

    项目中我们常常遇到这种需求--页面部分刷新.比如:加入用户,转到加入用户页面时,页面自己主动载入了全部部门. 完整流程:选择所属部门,填写username和password,点击"注冊&qu ...

  9. MEF初体验之十一:查询组合容器

    查询组合容器 组合容器暴露了几个get exports的重载方法和导出对象和对象集合.你需要注意下面的行为: 当请求单个对象实例时,如果未发现导出,一个异常将被抛出 当请求单个对象实例时,如果发现超过 ...

  10. Tempdb怎么会成为性能瓶颈

    原文:Tempdb怎么会成为性能瓶颈 转自:http://blogs.msdn.com/b/apgcdsd/archive/2011/01/25/tempdb.aspx 我曾经遇到过这样一个性能问题. ...