初识React

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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>