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. 隐写-CTF中图片隐藏文件分离方法总结

    0x00 前言 在安全的大趋势下,信息安全越来越来受到国家和企业的重视,所以CTF比赛场次越来越多,而且比赛形式也不断的创新,题目也更加新颖有趣,对选手的综合信息安全能力有一个较好的考验,当然更好的是 ...

  2. HTML 学习笔记 CSS3 (背景)

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在CSS3里面 你可以在一个标签元素里应用多个 ...

  3. JavaScript Math 对象

    JavaScript Math 对象 Math 对象 Math 对象用于执行数学任务. Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(). 语法 var ...

  4. BZOJ4197[NOI2005]寿司晚宴

    Description 为了庆祝 NOI 的成功开幕,主办方为大家准备了一场寿司晚宴.小 G 和小 W 作为参加 NOI 的选手,也被邀请参加了寿司晚宴. 在晚宴上,主办方为大家提供了 n−1 种不同 ...

  5. Centos6.2 下 vncserver 的安装

    好久没用vnc了, 把今天装的过程记录一下, 这是一个从网上下载的标准Centos6.2 虚机镜像, 已经带了桌面. 默认的用户是root和tom, 口令都是tomtom. 因为ssh服务没起来, 简 ...

  6. 047医疗项目-模块四：采购单模块—采购单审核提交（Dao,Service,Action三层）

    我们之前把采购单都审核了,这篇文章说的就是审核之后提交. 其实就是改变(update)采购单的审核状态. 需求: 用户要先查看采购单的内容. 查看采购单页面:页面布局同采购单修改页面. 选择审核结果. ...

  7. Codevs1026 逃跑的拉尔夫

    题目描述 Description 年轻的拉尔夫开玩笑地从一个小镇上偷走了一辆车,但他没想到的是那辆车属于警察局,并且车上装有用于发射车子移动路线的装置. 那个装置太旧了,以至于只能发射关于那辆车的移动 ...

  8. 永远不要修改arguments对象

    案例复现 var obj = { plus: function(arg0, arg1) { return arg0 + arg1; } }; function callMethod(context, ...

  9. spring WebSocket详解

    场景 websocket是Html5新增加特性之一,目的是浏览器与服务端建立全双工的通信方式,解决http请求-响应带来过多的资源消耗,同时对特殊场景应用提供了全新的实现方式,比如聊天.股票交易.游戏 ...

  10. 软件工程(DBSD2016) Git Review

    说明:任何问题请在评论区说明,会集中更新回复. 连连看组 源码: git clone https://git.coding.net/jx8zjs/llk.git 提交日志 一共有20次commit日志 ...