文档章节

ReactJS的简单介绍和使用

lonelydawn
 lonelydawn
发布于 2016/06/23 10:33
字数 689
阅读 1982
收藏 80

一、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的Flux

用ReactJS时不要使用MVC 我将通过列出一些单向数据流的例子来将ReactJS官方实现的Flux和我写的库Reflux作比较。 Facebook的ReactJS开发小组似乎并不待见MVC框架。将MVC模式和ReactJS结合使用...

leozdgao
2015/06/08
0
0
选择 Reac​​tJS 的五大理由

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一...

达尔文
2016/09/12
4.1K
32
Facebook 被集体“声讨”,要求更改 ReactJS 许可

Apache 软件基金会上周发布通知,反对使用 Facebook 的 BSD+专利 [ROCKSDB] 许可的流行软件。之后 Facebook 将其开源的 RocksDB 的许可更改为 Apache 2 加 GPL 2 的双重许可,而对于 ReactJ...

达尔文
2017/07/25
4.7K
16
一看就懂的ReactJs入门教程-精华版

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

方宏春
2018/06/20
0
0
react-router 进阶:认证流程、动画

https://github.com/reactjs/react-router/tree/master/examples https://github.com/reactjs/react-router/issues/1209 https://github.com/reactjs/react-router/blob/master/upgrade-guid......

K68
2016/08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

利用神器BTrace 追踪线上 Spring Boot应用运行时信息

概述 生产环境中的服务可能会出现各种问题,但总不能让服务下线来专门排查错误,这时候最好有一些手段来获取程序运行时信息,比如 接口方法参数/返回值、外部调用情况 以及 函数执行时间等信...

CodeSheep
54分钟前
4
0
OSChina 周四乱弹 —— 我想过年请假提前回家两天

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @clouddyy :#每日一歌# 分享王力宏的单曲《爱错》 《爱错》- 王力宏 手机党少年们想听歌,请使劲儿戳(这里) @Caremorele :这几天起床有点...

小小编辑
今天
169
7
Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
今天
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
3
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部