ReactJS入门

ReactJS入门学习一

阅读目录

回到顶部

React是什么？

React仅仅是VIEW层，而我们经常看到Angular是一个完整的框架，而React不是，因此我们看到他们两个的侧重点不一样，所以也不能比较的，React提供了模板语法及一些函数钩子用于HTML的渲染，只用于View层。

React的优点？

      1. 虚拟DOM

　　在DOM树的状态发生改变时，虚拟DOM机制会将前后DOM树进行对比，如果两个DOM树有不一样的地方，那么React仅仅会对那些不一样的区域来进行响应DOM修改，这也就是React的更高的性能是使用虚拟DOM来实现的。

2. 数据流

　　React实现了单向响应的数据流，从而减少了重复的代码，这也是为什么比传统数据绑定更简单。

浏览器对React的支持程度：IE9- 以下的浏览器是不支持React.

下面我们来学习下React的基本使用方法吧！

首先React擅长于组件化页面，我们来看看使用React来如何渲染页面的，如下代码：

首先需要在页面上引入React.js

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

HTML代码结构如下：

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

JS代码如下：

<script>
        var CommentBox = React.createClass({
            displayName: ‘CommentBox‘,
            render: function(){
                return (
                    React.createElement(‘div‘,{className:‘commentBox‘},"Hello,world!I am a CommentBox")
                );
            }
        });
        React.render(
            React.createElement(CommentBox,null),document.getElementById("content")
        );
</script>

在页面上生成代码结构如下：

在IE9+ firefox chrome下生效；

我们下面来解释下上面的代码的含义：

React.createClass()： 该方法来创建一个新的React组件；其中最重要的方法是render，该方法返回一颗React组件树，这棵树将会渲染成HTML；

上面的div标签不是真实的DOM节点，他们是React div组件的实例，我们可以认为React是通过此来如何处理标记或者一些数据，React是安全的，它不生成HTML字符串，所以默认阻止了xSS的攻击；

React.render()：该方法是 实例化根组件，启动框架，它有第二个参数，含义是：注入标记到原始的DOM元素中;

React 不依赖与Jquery，因此上面是通过 document.getElementById(“content”)来作为React.render()的第二个参数，当然我们也可以使用jqeury的方式来作为第二个参数调用，但是我们必须如下这样：(“#content”)[0], 而不是(“#content”)；

回到顶部

React如何制作组件？

如下我们有一个网站页面：首页分为如下几块，导航页，侧边栏，还有内容区；假如我现在想导航页，侧边栏和内容区都做成一个组件模块，因为有很多页面需要公用的；如下page页面结构图：

那么下面我们可以使用React.createClass()方法来创建一个react组件；如下代码：

导航页代码如下：我们使用JSX来写代码如下：(切记页面需要引入)

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

<script src="./build/JSXTransformer2.js"></script>

这句代码；这是目前测试的，方便点直接引入；

<script type="text/jsx">
        /* 导航模块代码 */
        var NavMode = React.createClass({
            render: function(){
                return (
                   <div className = "NavList">
                      Hello word! I am a Nav List
                   </div>
                );
            }
        });
        /* 侧边栏模块代码 */
        var SlideMode = React.createClass({
             render: function(){
                return (
                    <div className="slideMode">hello world! I am a slide</div>
                )
             }
        });
        /* 内容区模块代码 */
        var ContentMode = React.createClass({
            render: function(){
                return (
                    <div className="contentMode">Hello world! I am comtent</div>
                )
            }
        });
        /* 页面div封装 上面三个模块 */
        var page = React.createClass({
            render: function(){
                return (
                    <div className="homepage">
                        <h1>page首页</h1>
                        <NavMode />
                        <SlideMode />
                        <ContentMode />
                    </div>
                )
            }
        });
        /* 初始化到content容器内 */
        React.render(
            React.createElement(page,null),document.getElementById("content")
        );
    </script>

页面渲染完成后，查看如下演示：

因此在页面也可以看到预览效果；如上是根据JSX的语法来混合HTML的标签来创建我们的组件的，JSX编译器会自动重写HTML标签为React.createElement(tagName)表达式。

回到顶部

理解组件属性props

Props表示的是组件自身的属性，是父层节点传递给子层节点的一些属性或者数据，比如我的上面的代码，内容区，可能不同的模块有不同的内容，因此我们需要有相同的模板ContentMode 根据参数的传递不同而显示不同的内容；代码如下：

/* 内容区模块代码 */
var ContentMode = React.createClass({
        render: function(){
            return (
                <div className="ContentMode">
<div class="contents">{this.props.contents}</div>
                    {this.props.children}
                </div>
            )
        }
});
/* 页面div封装 上面三个模块 */
var Page = React.createClass({
    render: function(){
        return (
            <div className="homepage">
                <ContentMode  contents ="longen">this is one comment</ContentMode >
                <ContentMode  contents ="longen2">this is two comment</ContentMode >
            </div>
            )
        }
});
/* 初始化到content容器内 */
React.render(
    React.createElement(Page,null),document.getElementById("content")
);

在页面中显示的DOM结构如下：

如上，我们从父节点Page传递给子节点ContentMode 的一些数据，从父节点传递到子节点的数据称为 ”props”；

在JSX中通过javascript表达式放在大括号中(作为属性或者子节点)；我们访问传递给组件的命名属性作为 this.props的键，任何内嵌的元素作为this.props.children;

回到顶部

理解页面中如何渲染数据的

比如发ajax请求等返回数据，现在我这边是模拟静态数据：如下返回数据：

var data = [{"name":‘longen1‘,"age":‘28‘},{"name":‘longen2‘,"age":30}];

现在我们要做的是 通过上面的data数据 分别渲染到content(内容区域去)，第一步我们需要实例化根组件，调用React.render()方法；如下：

var data = [{"name":‘longen1‘,"age":‘28‘},{"name":‘longen2‘,"age":30}];

/* 初始化到content容器内 */
React.render(
    <ContentMode data={data} />, document.getElementById("content")
);
调用内容区域 ContentMode 模块，代码如下：
/* 内容区模块代码 */
var ContentMode = React.createClass({
    render: function(){
        return (
            <div className="ContentMode">
                <h1>内容渲染进来</h1>
                <Page data={this.props.data} />
            </div>
        )
    }
});

如上我们通过父层节点ContentMode 传递数据给子节点Page，Page模块通过this.props取到父节点传来的数据，再调用Page模块，渲染数据，Page模块渲染数据如下：

var Page = React.createClass({
    render: function(){
        var ContentModes = this.props.data.map(function(content){
            return (
                <p className="pline" data-age={content.age}>{content.name}</p>
            )
        });
        return (
            <div className="homepage">{ContentModes}</div>
        )
    }
});

然后Page模块通过自身属性 this.props取到值后 进行map遍历，如下页面演示效果：

HTML代码渲染成结构如下：

回到顶部

理解从服务器端获取数据及理解state的

现在我们来新建一个page.json来存放json数据，数据如下：

[{"name":"我是龙恩我来测试数据1","age":"28"},{"name":"我是涂根华我来测试数据2","age":"30"}]

现在让我们来从服务器端来获取数据，我们先使用React.render()这个方法来初始化根组件；如下代码：

/* 初始化到content容器内 */

React.render(

<ContentMode url="page.json" />, document.getElementById("content")

);

下面是所有的代码如下：

var Page = React.createClass({
    render: function(){
        var ContentModes = this.props.data.map(function(content){
            return (
                <p className="pline" data-age={content.age}>{content.name}</p>
            )
        });
        return (
            <div className="homepage">{ContentModes}</div>
        )
    }
});
/* 内容区模块代码 */
var ContentMode = React.createClass({
    getInitialState: function(){
        return {data:[]};
    },
    componentDidMount: function(){
        $.ajax({
            url: this.props.url,
            dataType:‘json‘,
            success: function(data){
                this.setState({data:data});
            }.bind(this),
            error: function(xhr,status,err){
                console.log(this.props.url,status,err.toString());
            }.bind(this)
        });
    },
    render: function(){
        return (
            <div className="ContentMode">
                <h1>内容渲染进来</h1>
                <Page data={this.state.data} />
            </div>
        )
    }
});
/* 初始化到content容器内 */
React.render(
    <ContentMode url="page.json" />, document.getElementById("content")
);

到目前为止：我们的每一个组件都是根据自己的props渲染了自己一次，props是不可变的，他们是从父节点传递过来的数据，但是呢，如果我们需要从服务器端更新数据的话，我们可以使用state来更新数据。this.state是组件私有的，我们可以通过this.setState() 来改变它，那么组件会重新渲染下自己。

现在我们来分析下上面的代码：getInitialState()是在组件生命周期中仅执行一次，设置组件的初始化状态。该方法是在React源码中做了封装的。

componentDidMount() 是一个组件被渲染的时候React自动调用的方法，该方法也是React源码中封装好了的，我们可以看到如上代码在调用getInitialState()方法时，给data定义了一个空数组[]; 当调用componentDidMount() 方法时，通过发ajax请求(在此我们使用jquery来演示ajax)，当有数据更新的时候，我们使用 this.setState({data:data}); 该方法，对数据data重写赋值；从而改变原有的数据；然后使用新数据使UI自动更新；

在页面上演示效果如下：

页面HTML代码渲染结构如下：

我们也可以仿照新浪微博那样，每隔几秒中自动刷新数据，这里我们可以使用简单的setInterval()来轮询下，当然我们可以使用更好的方法 WebSockets技术

代码如下：

<script type="text/jsx">
    var Page = React.createClass({
        render: function(){
            var ContentModes = this.props.data.map(function(content){
                return (
                    <p className="pline" data-age={content.age}>{content.name}</p>
                )
            });
            return (
                <div className="homepage">{ContentModes}</div>
            )
        }
    });
    /* 内容区模块代码 */
    var ContentMode = React.createClass({
        getInitialState: function(){
            return {data:[]};
        },
        loadServer: function(){
            $.ajax({
                url: this.props.url,
                dataType:‘json‘,
                success: function(data){
                    this.setState({data:data});
                }.bind(this),
                error: function(xhr,status,err){
                    console.log(this.props.url,status,err.toString());
                }.bind(this)
            });
        },
        componentDidMount: function(){
            this.loadServer();
            setInterval(this.loadServer,this.props.pollInterval);
        },
        render: function(){
            return (
                <div className="ContentMode">
                    <h1>内容渲染进来</h1>
                    <Page data={this.state.data} />
                </div>
            )
        }
    });
    /* 初始化到content容器内 */
    React.render(
        <ContentMode url="page.json" pollInterval={2000}/>, document.getElementById("content")
    );
</script>

如上代码，我们使它们每隔2秒钟会发一次ajax请求，请求新数据回来；

好了 由于时间的关系 入门学习一 先介绍这里，后面继续学习！

时间： 2024-12-10 14:16:58

ReactJS入门的相关文章

ReactJS入门二

ReactJS入门学习二 ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用样式 回到顶部 React的背景和基本原理 在web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作,复杂或频繁的对DOM操作是性能瓶颈产生的原因,React为此引入了虚拟的DOM的机制,在浏览器端使用javascript实现了一套DOM API,

一看就懂的ReactJs入门教程（精华版）

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用

ReactJS入门基础

渲染这俩字可能在很多地方都见过.但可能不太理解是啥意思. 那么首先我们来理解一下渲染. 渲染 我觉得这样理解比较通俗. 我们做一个汽车,开始是没有喷漆的(没有css) 只是些框框架架(HTML标签).那么网页加载就是首先加载完HTML元素,其次是css,css去遍历渲染每个对应元素的样式让其看起来就是我们所想看到的效果一样.不同浏览器的渲染方式不一样,渲染机制也不一样. 简单来将一个完整的HTML页面渲染完成是有2个东西的.一个HTML元素加载完成,一个是CSS样式加载完成.其次才是JS,如果J

ReactJS入门教程

一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http://facebook.github.io/re

ReactJs入门---编写Hello World

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 下面写一个React入门的小案例--Hello World ReactJs下载非常简单,为了方便大家下载

一看就懂的ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦~  一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很

ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好

一看就懂的ReactJs入门教程-精华版-转载

传送门:http://www.cnblogs.com/yunfeifei/p/4486125.html 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有很大收获哦~  一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript M

ReactJS入门（四）—— 组件API

本篇将介绍 React 组件的API,其中主要的几个API我们在第一篇的时候便已介绍过,这里可以做个温故知新. 本篇的代码你也可以在我的Github上获取到. setState 参数: nextState(object), [callback(function)] 设置 nextState 的某个键(属性)值(别忘了我们可以在 shouldComponentUpdate 方法中获取到 nextState 的值来跟当前的 this.state 进行对比),然后下一次 EventLoop 时 thi