React

是Facebook开源的一个用于构建用户界面的Javascript库，已经 应用于Facebook及旗下Instagram

React专注于MVC架构中的V，即视图

React引入了 虚拟DOM的概念：开发者操作虚拟DOM，React在必要的时候将它们渲染到真正的 DOM上

在引入React库之后，开发API就通过React对象暴露出来了，我们要做的就是

在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。

  • createElement(type,[props],[children...]) - 在虚拟DOM上创建指定的React元素

　　type用来指定要创建的元素类型

　　props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等

　　children开始的所有参数，都被认为是这个元素的子元素

var el = React.createElement(

    "ul",

    null,

    React.createElement("li",null,"China"),

    React.createElement("li",null,"Japan"),

    React.createElement("li",null,"Korea")

);
  • render(element,container,[callback]) - 将虚拟DOM上的对象渲染到真实DOM上

　　element是使用createElement()方法创建的React元素

　　container是真实DOM中的HTML元素，作为渲染的目标容器

　　callback参数是可选的函数，当渲染完成或更新后被执行

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>First</title>

    <!--.引入React库-->

    <script src="lib/react.min.js"></script>

</head>

<body>

    <!--.在真实DOM上定义容器-->

    <div id="content"></div>

    <script>

        //3.在虚拟DOM上创建p元素

        var el = React.createElement(

          "ul",

          null,

          React.createElement("li",null,"aa"),

          React.createElement("li",null,"bb"),

          React.createElement("li",null,"cc")

        );

        //4.将虚拟DOM上的ul元素渲染到真实DOM上的#content容器

        React.render(el,document.querySelector("#content"));

    </script>

</body>

</html>

Web应用 中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异， 然后再决定如何最优地更新DOM。提供了一种一致的开发方 式来开发服务端应用、Web应用和手机端应用。有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容 渲染到不同的平台。

React组件就是一个 实现预定义接口的JavaScript类：

React.createClass(meta)

meta是一个实现预定义接口的JavaScript对象

在meta中，至少需要实现一个render()方法，而这个方法， 必须而且只能返回一个有效的React元素

如果组件是由多个元素构成的，那么必须在外边包一个顶层 元素，然后返回这个顶层元素

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>LED Display</title>

    <script src="lib/react.min.js"></script>

    <!--组件样式-->

    <style>

        @font-face {

            font-family:"LED";

            src:url("font/LED.eot?") format("eot"),

                url("font/LED.woff") format("woff"),

                url("font/LED.ttf") format("truetype"),

                url("font/LED.svg#LED") format("svg");

            font-weight:normal;

            font-style:normal;

        }

        .ez-led{

            font-family : "LED";

            font-size : 40px;

            background : #70d355;

            width: 500px;

            height:60px;

            display:block;

            line-height : 60px;

            text-align : right;

            padding : 10px;

            letter-spacing:5px;

            margin-top:20px;

        }

    </style>

</head>

<body>

    <!--定义容器-->

    <div id="content"></div>

    <script>

    //定义React组件

    var EzLedComp = React.createClass({

        //每个React组件都应该事先render()方法

        render : function(){

            var e = React.createElement(

                "div",

                null,

                React.createElement("div",{className : "ez-led"},"Hello, React111!"),

                React.createElement("div",{className : "ez-led"},"Hello, React222!")

            );

            //render()方法应该返回一个React元素

            return e;

        }

    });

    //创建React元素

    var el = React.createElement(EzLedComp);

    //渲染

    React.render(el,document.querySelector("#content"));

    </script>

</body>

</html>

React引入虚拟DOM以后，创建DOM树得在JavaScript里写代码，这使得界面定义 变得相当繁琐,于是JSX来了

JSX是对JavaScript语法的扩展，它让我们可以在JavaScript代码中以类似HTML 的方式创建React元素

  • 指定脚本类型
<script type="text/jsx">...</script>

//外部脚本

<script src="a.js" type="text/jsx"></script>
  • 引入JSX语法转换库
<script src="lib/JSXTransformer.js"></script>

示例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>LED Display-in JSX</title>

    <!--引入React库-->

    <script src="lib/react.min.js"></script>

    <!--引入JSX转换库-->

    <script src="lib/JSXTransformer.js"></script>

    <!--组件样式-->

    <style>

        @font-face {

            font-family:"LED";

            src:url("font/LED.eot?") format("eot"),

                url("font/LED.woff") format("woff"),

                url("font/LED.ttf") format("truetype"),

                url("font/LED.svg#LED") format("svg");

            font-weight:normal;

            font-style:normal;

        }

        .ez-led{

            font-family : "LED";

            font-size : 40px;

            background : #70d355;

            width: 300px;

            height:60px;

            line-height : 60px;

            text-align : right;

            padding : 10px;

            letter-spacing:5px;

        }

    </style>

</head>

<body>

    <!--定义容器-->

    <div id="content"></div>

    <!--声明脚本类型为JSX-->

    <script type="text/jsx">

        //定义React组件

        var EzLedComp = React.createClass({

            //每个React组件都应该事先render()方法

            render : function(){

                var e =

                    //JSX-->

                    <div>

                        <div className="ez-led">Hello, React!</div>

                        <div className="ez-led"></div>

                        <div className="ez-led"></div>

                    </div>;

                    //<--JSX

                return e;

            }

        });

        //渲染

        React.render(

            <EzLedComp/> , //JSX

            document.querySelector("#content"));

    </script>

</body>

</html>

初识React的更多相关文章

  1. 初识React Native，踩坑之旅....

    开启Genymotion Android模拟器后 1.运行“react-native run-android”报端口冲突....解决方法: 2.运行“react-native run-android” ...

  2. 初识React,Virutal DOM, State以及生命周期

    这是React分类下的第一篇文章,是在了解了一些基本面后,看Tyler文章,边看边理解边写的. React可以看做是MVC中的V,关注的是视图层.React的组件就像Angular的Directive ...

  3. React组件开发（一）初识React

    *React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...

  4. 初识React：使用React完成Hello World程序

    正式学习React之前,通过一个简单的Hello Word程序来感受一下. <!DOCTYPE html> <html lang="zh-cn"> < ...

  5. 【React】初识React

    React是什么 React是如今(2015年)最热门的前端技术. 在React中.一切皆组件. A JavaScript library for building user interfaces R ...

  6. 初识react中的状态量

    react组件中的两类状态数据:props,state,官网API给出的使用规范,多读几遍,受益匪浅: 结论: 1. 对应任何可变的数据,理应只有一个单一“ 数据源 ” 2. 如果多个组件均需要这些数 ...

  7. 初识react native遇到的问题

    Andriod 使用react native时遇到的问题     打开现有项目报错: 从第一行Error可以知道是一个zip的压缩文件打不开,往下看应该是下载的Gradle文件有问题,提示也是让从新下 ...

  8. 前端笔记之React（一）初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

  9. 初识react中高阶组件

    高阶组件并不是一个组件,而是一个函数 这个函数返回值是一个组件,并且接受一个组件做为参数:并且返回一个新组件: function HighOC(WrapComponent){ //定义一个高阶组件 , ...

随机推荐

  1. java 28 - 4 JDK5的新特性 之 枚举的概述和自定义枚举类

    枚举 枚举概述 是指将变量的值一一列出来,变量的值只限于列举出来的值的范围内.举例:一周只有7天,一年只有12个月等. 回想单例设计模式:单例类是一个类只有一个实例 那么多例类就是一个类有多个实例,但 ...

  2. 'gulp'不是内部或者外部命令，也不是可运行的程序或批处理文件

    1,在用户变量里新建变量 PATH: %USERPROFILE%\AppData\Roaming\npm(如果已有path变量,则在后面直接加上即可) 2,在系统环境变量里的path加上node.js ...

  3. 为什么mysql设置了密码之后，本地还可以直接访问，不需要输入密码就可以登录数据库了？

    应为数据库里面有空用户 select * from mysql.user where user=''; 查询如果有,把他删了然后重启mysql服务. 他有空用户你删除了 然后重启mysql生效,这个是 ...

  4. .htaccess重命名时提示必须键入文件名怎么解决

    在上一篇文章中提到过“目前data.uploads有执行.php权限,非常危险,需要立即取消目录的执行权限!”的时候可以通过创建一个名字为“.htaccess”的文件夹解决.但是在创建的时候却发现对记 ...

  5. servlet 中文乱码问题

    两步骤搞定: 1,修改tomcat的server.xml <Connector port="8080" protocol="HTTP/1.1" conne ...

  6. Linux 网络编程详解二（socket创建流程、多进程版）

    netstat -na | grep " --查看TCP/IP协议连接状态 //socket编程提高版--服务器 #include <stdio.h> #include < ...

  7. spring mvc4的日期/数字格式化、枚举转换

    日期.数字格式化显示,是web开发中的常见需求,spring mvc采用XXXFormatter来处理,先看一个最基本的单元测试: package com.cnblogs.yjmyzz.test; i ...

  8. WP7开发 Sqlite数据库的使用 解决Unable open the database

    WP7本身不支持Sqlite数据库,但我们可以添加第三方组件让它支持Sqlite. 首先在项目中添加引用Community.CsharpSqlite.WP.dll,我会放后面让大家下载,我下了有几天了 ...

  9. TinyFrame升级之一：框架概览

    由于之前的TinyFrame多于简单,并且只是说明原理,并无成型的框架出来,所以这次我把之前的知识进行了汇总,然后做出了这一版的TinyFrame框架. 整个框架的结构如下: TinyFrame.Da ...

  10. 品读吴军"之"系列

    品读吴军"之"系列 这一两年,阅读吴军老师(微博,知乎专栏)的书占了我相当多的时间. 读吴军老师(微博,知乎专栏)的书,会让你心生敬佩,不禁想问"为什么有的作者有如此丰富 ...