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请求,请求新数据回来;
好了 由于时间的关系 入门学习一 先介绍这里,后面继续学习!
ReactJS入门学习一的更多相关文章
- ReactJS入门学习二
ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...
- ReactJS入门二
ReactJS入门学习二 ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事 ...
- 一看就懂的ReactJs入门教程(精华版)
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...
- ReactJs入门教程-精华版
原文地址:https://www.cnblogs.com/Leo_wl/p/4489197.html阅读目录 ReactJs入门教程-精华版 回到目录 ReactJs入门教程-精华版 现在最热门的前端 ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
- Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
- PyQt4入门学习笔记(三)
# PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...
- PyQt4入门学习笔记(一)
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
随机推荐
- [CareerCup] 8.7 Chat Server 聊天服务器
8.7 Explain how you would design a chat server. In particular, provide details about the various bac ...
- 做中学learning by doing——个人感想20155312张竞予
做中学learning by doing--个人感想 概要 阅读五篇博客后的感触 我的个人技能 个人经验的类比与总结 c语言学习情况 java学习目标及规划 公文写作能力 我的感触 仔细阅读了老师公众 ...
- C#基础之yield与Singleton
1.实例解析yiled的作用 最近参加java笔试题第一次见到yield这个关键字,既然遇见了那肯定要掌握,下面是C#中关于yield关键字的总结.yield这个关键字作用于迭代器块中,其最本质的功能 ...
- Stream 流操作
Stream 类 先看下面的图 Stream 是所有流的抽象基类(不能被实例化,需要使用他的派生类FileStream/MemoryStream/BufferedStream).流是字节序列的抽象概 ...
- 【MPI学习5】MPI并行程序设计模式:组通信MPI程序设计
相关章节:第13章组通信MPI程序设计. MPI组通信与点到点通信的一个重要区别就是:组通信需要特定组内所有成员参与,而点对点通信只涉及到发送方和接收方. 由于需要组内所有成员参与,因此也是一种比较复 ...
- 谈谈iOS9中的WebKit 与 Safari
每个用过 UIWebView 的iOS开发者对其诸多的限制和有限的功能也深有感触.悻然,自iOS8推出 WebKit 框架后将改变这一窘境.在本文我将会深入WebKit来体验一下它给我们带来的好处,同 ...
- linux用终端上传文件和文件家到远程的服务器
文件上传:scp 本地文件地址 root@aifei8.net:/var/www/html/landrover 文件夹上传:1.先进入文件夹目录 2. 执行命令:scp -r . root@aifei ...
- C语言中memset(void *s, char ch,unsigned n)用的用法
将指针s所指的内存空间中前n为重置为字符c 程序例: #include <string.h> #include <stdio.h> #include <memory.h& ...
- oracle-分页查询方案
一.使用rownum做三层包装查询(常用方案) SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM TABLE_NAME) A ) 其中 ...
- Java 并发编程 Executor
Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Executor,Executors,ExecutorService,Completion ...