一、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]);