文档章节

ReactJS的简单介绍和使用

lonelydawn
 lonelydawn
发布于 2016/06/23 10:33
字数 689
阅读 1979
收藏 80
点赞 3
评论 3

一、React的家世背景

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

Facebook的设计理念是独立、小巧、快速、创新,而React的特点也正说明了这一点。

二、React 更“轻”的MDV框架

先来说一下什么是MDV吧,MDV即Model Driven View,根据model动态生成view。MDV框架将程序员从传统手动渲染dom节点和事件绑定中解放了出来,大大提高了开发效率。

React更“轻”,这个"更"是有对比含义的,相对于AngularJs的双向数据流,ReactJs的单向数据流显然是更轻量级,而且React维护自己的VTree(虚拟Dom树),可以更快的渲染dom节点。据说,react渲染的界面,fps可以保持在60左右,这一点使得react特别适合于制作游戏。在react刚推出的时候,有测试指出react的性能要比angular高20%左右。

但是,AngularJs的数据交互可以双向进行,可以用于CURD,应用易于接受用户的自定义以及个人数据。当然, 毕竟 React是用于“render”的,view中最关键的是管理组件状态变化,而React在这一点上做的比AngularJs好很多。

在React中,对象的状态使用this.state表示,对象的初始状态设置使用getInitialState,设置状态使用setState,数据使用props管理,DOM操作和事件监听则类似于jquery。

 

三、使用React制作简易悬浮框

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div id="container"></div>
	<div id="layer"></div>
</body>
	<script type="text/javascript" src="ReactJs/react.min.js"></script>
	<script type="text/javascript" src="ReactJs/react-dom.min.js"></script>
	<script type="text/javascript" src="ReactJs/browser.min.js"></script>
	<script type="text/javascript" src="jquery/jquery.min.js"></script>
	<script type="text/babel" src="js/common.js"></script>
</html>

style.css

#modal{
	width:400px;
	height:210px;
	margin-left: auto;
	margin-right: auto;
	padding-left:10px;
	padding-right:10px;
	border:1px solid #999;
	border-radius: 10px;
	background-color: #fff;
	display:none;
}
#modal .btn{
	float:right;
	margin-right:10px;
}
#layer{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
}

common.js (React创建组件)

var BootstrapButton=React.createClass({
	render:function(){
		return (
			<a 	{...this.props}
				href="javascript:;" 
				role="button" 
				className={'btn '+this.props.className}/>
		);
	}
});

var BootstrapModal=React.createClass({
	render:function(){
		return (
			<div id="modal" ref="root">
				<h1>Hello world</h1>
				<hr/>
				<p>This is a test!</p>
				<hr/>

				<BootstrapButton className="btn-primary" onClick={this.handleConfirm}>
				Confirm
				</BootstrapButton>
			</div>
		);
	},
	handleConfirm:function(){
		this.close();
	},
	open:function(){
		$(this.refs.root).show();

		$("#layer").css("background","rgba(112,112,112,0.6)");
	},
	close:function(){
		$(this.refs.root).hide();

		$("#layer").css("background","rgba(0,0,0,0)");
	}
});

var ModalWidget=React.createClass({
	render:function(){
		return(
			<div>
				<BootstrapButton className="btn-default" onClick={this.showModal}>
				show
				</BootstrapButton>

				<BootstrapModal ref="modal">
				</BootstrapModal>
			</div>
		);
	},
	showModal:function(){
		{this.refs.modal.open()};
	}
});

ReactDOM.render(<ModalWidget/>,$("#container")[0]);

 

 

© 著作权归作者所有

共有 人打赏支持
lonelydawn
粉丝 41
博文 50
码字总数 52905
作品 0
闵行
前端工程师
加载中

评论(3)

WolfX
WolfX
第一次用不习惯, 熟悉之后就爱上它了, 尤其是做单页应用的时候简直就是神器.
ios122
ios122
对react 感兴趣的童鞋,一定要 顺手看看 redux http://redux.js.org/
叫我刀刀
叫我刀刀
一看就懂的ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点...

方宏春
06/20
0
0
ReactJs入门教程-精华版

一、ReactJS简介   React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西...

-鹏
2015/11/10
0
0
React 快速上手 - 07 前端路由 react-router

React 快速上手 - 07 前端路由 react-router 目标 基础使用 参数传递 路由匹配 转换动画 跳转路由 环境 react 16 react-router 4 react-router-dom 4 react-transition-group 0. 安装 通过官...

会煮咖啡的猫
05/24
0
0
React.js 实战之深入理解组件

sublime 插件安装 用Package Control安装 按下调出命令面板 输入 调出 选项并回车,然后在列表中选中要安装的插件 function形式 state属性 props属性介绍:...

紫霞等了至尊宝五百年
06/02
0
0
ReactJS vs Angular 5 vs Vue.js - 哪个框架更好?

译者按: 在全球大范围看,React和Angular依然遥遥领先,Vue.js这位后起之秀还需努力做到全球化! 原文: ReactJS vs Angular5 vs Vue.js - What to choose in 2018? 译者: Fundebug 为了保证...

Fundebug
07/09
0
0
WDShare【修炼JS:带你入门、带你飞】 第6期 2015.5 圆满举办【西安前端交流】【西安】

预计下期会在7月份举办,如果您能提供场地赞助或分享讲师,可以给我留言 官方网站:www.wdshare.org 本次交流会由WDShare组织主办 感谢智讯科技提供活动场地,智讯科技产品:带客通、每日兼职...

党程V
2015/06/01
0
5
在create-react-app中使用sass

Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass是一个将脚本解析成CSS的脚本语言,即SassScript。S...

Originalee
04/04
0
0
ReactJS 关键知识点汇总

React 组件之间 事件调用(父组件调用子组件)(http://blog.csdn.net/chenyongtu110/article/details/49613967) 2.ReactJS学习笔记(三)-父子组件间的通信(http://blog.csdn.net/yf275908654/a...

IT追寻者
2017/10/23
0
0
在JavaScript中仿真Java的enum

背景 最近开始做的一个项目使用facebook的ReactJS前端框架。发现经常使用react的keyMirror工具来定义一些枚举常量: 其他JS代码对该枚举的引用大概如下代码: 这样的代码感觉还行,起码比字串...

罗格林
2015/04/24
0
4
react学习(投稿前还需要修改)

react学习: Dr: redux-entry: https://github.com/ThatBean/redux-entry/blob/master/source/index.js https://github.com/dr-js/dr-js/blob/master/source/common/immutable/StateStore.j......

程序员小哥哥
06/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

全新内存布局Android5 for one x

众所周知Android5.0默认ART模式,运行速度加倍,软件占用内存也加倍,我们one x这种元老机采用旧的内存布局,data空间2g ART模式下安装几个软件也就不够用了。最近逛国外的xda论坛,发现有大...

CrazyManDF
3分钟前
0
0
web3j转账

 web3 转账功能   为了完成以太坊交易,必须有几个先决条件   1、对方的以太坊地址   2、确定要转账的金额   3、自己地址的转账权限   4、大于转账金额的以太币,以太币转账其实就...

智能合约
4分钟前
0
0
10.28 rsync工具介绍 , rsync常用选项, rsync通过ssh同步

rsync远程同步 重点!重点!!重点!!! 例子 • rsync -av /etc/passwd /tmp/1.txt • rsync -av /tmp/1.txt 192.168.188.128:/tmp/2.txt rsync格式 • rsync [OPTION] … SRC DEST • rs......

Linux_老吴
18分钟前
0
0
iis php 环境搭建,非常详细的教程

准备篇 一、环境说明: 操作系统:Windows Server 2016 PHP版本:php 7.1.0 MySQL版本:MySQL 5.7.17.0 二、相关软件下载: 1、PHP下载地址: http://windows.php.net/downloads/releases/ph...

T_star
20分钟前
0
0
Day35 rsync通过服务同步

rsync通过服务同步 rsyncd.conf配置文件详解 port:指定在哪个端口启动rsyncd服务,默认是873端口。 log file:指定日志文件。 pid file:指定pid文件,这个文件的作用涉及服务的启动、停止等...

杉下
25分钟前
1
0
【最新最全】为 iOS 和 Android 的真机和模拟器编译 Luajit 库

编译 Luajit 库,的确是一个挑战。因为官网的教程,在当前版本的 Xcode 和 NDK 环境中,已经不适用了。以前只是编译了适用于真机的 Luajit 库。最近在尝试编译模拟器 Luajit 库,就顺便梳理了...

ios122
25分钟前
0
0
rsync至ssh同步

rsync: 文件同步工具,可实现“增量拷贝”;使用yum安装rsync包 常用选项:-a=-rtplgoD (-r同步目录,-t保持文件的时间属性,-p保持文件的权限属性,-l保持软连接,-g保持文件的属组,-o保持...

ZHENG-JY
31分钟前
0
0
TradingView 学习笔记

#前言 公司最后需要使用TradingView展示K线图走势。由于之前没接触过,拿到文档时一脸蒙逼。还好找到二篇文章+Demo代码,直接改改就行了。 #被批 由于上面的懵懂,有个问题困扰4个小时没解决...

hihubs
31分钟前
0
0
10.28 rsync工具介绍~10.31 rsync通过ssh同步

rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件。rsync使用所谓的“rsync算法”来使本地和远程两个主机之间的文件达到同步,这个算法只传送两个文件的不同部分,而...

洗香香
33分钟前
1
0
卷积为什么要旋转180度

参考《最容易理解的对卷积(convolution)的解释》 https://blog.csdn.net/bitcarmanlee/article/details/54729807 这篇博客详细讲解了“卷积”,提及了为什么要反转180度,我简述下。 1.卷积的...

datadev_sh
42分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部