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

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

虽然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. A WPF/MVVM Countdown Timer

    Introduction This article describes the construction of a countdown timer application written in C# ...

  2. 使用 Gradle 插件进行代码分析(转)

    代码分析在大多数项目中通常是作为最后一个步骤(如果做了的话)完成的.其通常难以配置及与现有代码整合. 本文旨在勾勒出使用 Gradle 整合 PMD 与 FindBugs 的步骤,并将其与一个现有的 ...

  3. JComboBox

    package swing.combox; import java.awt.FlowLayout; import javax.swing.DefaultComboBoxModel; import ja ...

  4. oracle db于,一个特定的数据字典pct miss其计算公式

    这篇文章是原创文章,转载请注明出处: http://blog.csdn.net/msdnchina/article/details/38766801 本文提到的数据字典.以dc_histogram_d ...

  5. Linux开机自启动

    永久打开或则关闭 chkconfig iptables on chkconfig iptables off 即时生效,重启后还原 service iptables start service ipta ...

  6. Android多线程.断点续传下载

    多线程,可断点续传的demo!最早写于2010.7! /** * @brief  主界面      * @author lixp  */ public class HomeActivity exten ...

  7. java实现线性链表结构

    package com.hephec.ds; public class LinkedList<T> { //定义一个内部类节点Node Node实例代表链表的节点 class Node{ ...

  8. C++学习笔记1--基础知识

    #include <iomanip> setpresition(int n); 设置输出精度浮点数是n. [goto声明] goto也被称为无条件分支语句购买勇于改变运行顺序的声明.got ...

  9. NetBeans工具学习之道:NetBeans IDE Java 高速新手教程

    欢迎使用 NetBeans IDE! 本教程通过指导您创建一个简单的 "Hello World" Java 控制台应用程序,简要介绍 NetBeans IDE 工作流.学习完本教程 ...

  10. 移动端 微信 网易 触屏滑动回弹菜单(css版)

    总结一下: 有点:网易新闻,微信 热文 都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧: bug: 部分安卓浏览器(uc,自带)  只支持持续滑动,不 ...