ReactJS的简单介绍和使用

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

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 (
			
		);
	}
});

var BootstrapModal=React.createClass({
	render:function(){
		return (
			

				
Hello world
				

				
This is a test!
				


				
				Confirm
				
			
		);
	},
	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(
			

				
				show
				

				
				
			
		);
	},
	showModal:function(){
		{this.refs.modal.open()};
	}
});

ReactDOM.render(,$("#container")[0]);