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. js中控制小数点的显示位数的技术整理

    js中自带方法控制小数点的显示位数(四舍五入) alert((12.9299).toFixed(2)); //12.93 alert((12.9243).toFixed(2)); //12.92 小数 ...

  2. 关于iOS9,Xcode7以上的安全性问题

    目前伴随着苹果方面对安全性方面的重视,在Xcode开发过程中有时候会出现数据解析在view上不显示的问题 这是在iOS9,Xcode7以后苹果方面为了保护用户安全而采用的用户发送请求机制,那么在开发中 ...

  3. Unicode字符列表（超完整）

    Unicode字符列表(超完整)Unicode, 字符, 列表代码 显示 描述U+0020  空格 U+0021 ! 叹号 U+0022 " 双引号 U+0023 # 井号 U+0024 $ ...

  4. Linux 信号详解三（sleep，raise）

    sleep()函数 .sleep()函数作用:让进程睡眠 .能被信号打断,然后处理信号函数以后,就不再睡眠,直接向下执行代码 .sleep函数的返回值是剩余秒数 //sleep 函数 #include ...

  5. c语言 指针与地址的区别

    指针由两部分组成,指针的类型和指针的值(也就是变量的地址). 指针和地址的区别: 地址只是一堆十六进制的字符,对应着内存条的某段内存, 而指针本身有地址,指针的值也是一个地址,指针本身还有类型,这与单 ...

  6. c++基础 explicit

    c++的构造函数也定义了一个隐式转换 explicit只对构造函数起作用,用来抑制隐式转换 看一个小例子 新建一个头文件 #ifndef CMYSTRING_H #define CMYSTRING_H ...

  7. leetcode - 位运算题目汇总(下）

    接上文leetcode - 位运算题目汇总(上),继续来切leetcode中Bit Manipulation下的题目. Bitwise AND of Numbers Range 给出一个范围,[m, ...

  8. VS Code First使用Mysql数据库详解

    最近电脑出毛病了,自己装显卡驱动给装死了开不了机,自己研究了两天也没解决,只有去修电脑的找专业人员,说起来惭愧,虽然自己是搞计算机的可电脑自己重装系统都还搞不定.重装系统又清理灰尘花了50大洋,现在用 ...

  9. UltraEdit 编译输出中文乱码的解决办法

    配置UE的时候,都告诉大家javac   %n%e 接可以了,但是再运行的时候,会出现乱码,再加上-J-Duser.language=GBK就可以了,也就是下面的样子. javac -J-Duser. ...

  10. 深入理解拉格朗日乘子法（Lagrange Multiplier) 和KKT条件

    [整理]   在求解最优化问题中,拉格朗日乘子法(Lagrange Multiplier)和KKT(Karush Kuhn Tucker)条件是两种最常用的方法.在有等式约束时使用拉格朗日乘子法,在有 ...