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. Python自动补全

    转自:http://blog.linuxeye.com/324.html Python自动补全有vim编辑下和python交互模式下,下面分别介绍如何在这2种情况下实现Tab键自动补全. 一.vim ...

  2. Integer.parseInt(String s) 和 Integer.valueOf(String s) 的区别

    通过查看java.lang.Integer的源码可以发现, 它们最终调用的都是 /** * Parses the string argument as a signed integer in the ...

  3. oracle编程总结

    1,SEQUENCE的使用 问题:在MSSQL中,我们可以通过设置自增长来作为主键,但是oracle里面没有这个 解决方案:使用SEQUENCE来实现,具体步骤如下 (1)首先建立一个序列(就是每次查 ...

  4. Protocol in Objective-C

    Objecttive-C  Protocal 相似 Java Interface

  5. velocity模板引擎学习(4)-在standalone的java application中使用velocity及velocity-tools

    通常velocity是配合spring mvc之类的框架在web中使用,但velocity本身其实对运行环境没有过多的限制,在单独的java application中也可以独立使用,下面演示了利用ve ...

  6. FineUI v4.0.3 (beta) 和 FineUI v3.3.3 发布了！

    关于FineUI基于 ExtJS 的开源 ASP.NET 控件库 FineUI的使命创建 No JavaScript,No CSS,No UpdatePanel,No ViewState,No Web ...

  7. JQuery 图片略缩与弹出预览 jqthumb fancybox

    弹出框插件-FANCYBOXhttp://www.jq22.com/jquery-info28 jqthumb.js缩略图插件 http://www.ijquery.cn/?p=798

  8. 又发现个.net framework的坑

    请找出这两个方法的区别: http://msdn.microsoft.com/en-us/library/ms584187(v=vs.110).aspx

  9. [转]搞ACM的你伤不起(转自Roba大神)

    劳资六年前开始搞ACM啊!!!!!!!!!! 从此踏上了尼玛不归路啊!!!!!!!!!!!! 谁特么跟劳资讲算法是程序设计的核心啊!!!!!! 尼玛除了面试题就没见过用算法的地方啊!!!!!! 谁再跟 ...

  10. Python学习教程

    Python语法简洁清晰,特色之一是强制用空白符(white space)作为语句缩进.Python具有丰富和强大的库.它常被昵称为胶水语言,能够把用其他语言制作的各种模块(尤其是C/C++)很轻松地 ...