一、React的家世背景 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。
一、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]);
