一、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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<span class="hljs-doctype"><!DOCTYPE html></span> <span class="hljs-tag"><<span class="hljs-title">html</span>></span> <span class="hljs-tag"><<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span> <span class="hljs-tag"><<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">title</span>></span> <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"bootstrap/bootstrap.min.css"</span>></span> <span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/style.css"</span>></span> <span class="hljs-tag"></<span class="hljs-title">head</span>></span> <span class="hljs-tag"><<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"container"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"layer"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"ReactJs/react.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"ReactJs/react-dom.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"ReactJs/browser.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"jquery/jquery.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/babel"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"js/common.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">html</span>></span> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<span class="hljs-id">#modal</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">400px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">210px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> auto</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"> auto</span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-left</span>:<span class="hljs-value"><span class="hljs-number">10px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">padding-right</span>:<span class="hljs-value"><span class="hljs-number">10px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"><span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#999</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value">none</span></span>; <span class="hljs-rule">}</span></span> <span class="hljs-id">#modal</span> <span class="hljs-class">.btn</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value">right</span></span>; <span class="hljs-rule"><span class="hljs-attribute">margin-right</span>:<span class="hljs-value"><span class="hljs-number">10px</span></span></span>; <span class="hljs-rule">}</span></span> <span class="hljs-id">#layer</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"><span class="hljs-number">100%</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">100%</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value">fixed</span></span>; <span class="hljs-rule"><span class="hljs-attribute">top</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"><span class="hljs-number">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">z-index</span>:<span class="hljs-value">-<span class="hljs-number">1</span></span></span>; <span class="hljs-rule">}</span></span> |
common.js （React创建组件）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<span class="hljs-keyword">var</span> BootstrapButton=React.createClass({ render:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag"><<span class="hljs-title">a</span> {<span class="hljs-attribute">...this.props</span>} <span class="hljs-attribute">href</span>=<span class="hljs-value">"javascript:;"</span> <span class="hljs-attribute">role</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">{'btn</span> '+<span class="hljs-attribute">this.props.className</span>}/></span> )</span>; } }); <span class="hljs-keyword">var</span> BootstrapModal=React.createClass({ render:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span> ( <span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"modal"</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">"root"</span>></span> <span class="hljs-tag"><<span class="hljs-title">h1</span>></span>Hello world<span class="hljs-tag"></<span class="hljs-title">h1</span>></span> <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span> <span class="hljs-tag"><<span class="hljs-title">p</span>></span>This is a test!<span class="hljs-tag"></<span class="hljs-title">p</span>></span> <span class="hljs-tag"><<span class="hljs-title">hr</span>/></span> <span class="hljs-tag"><<span class="hljs-title">BootstrapButton</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"btn-primary"</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleConfirm}</span>></span> Confirm <span class="hljs-tag"></<span class="hljs-title">BootstrapButton</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> )</span>; }, handleConfirm:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">this</span>.close(); }, open:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ $(<span class="hljs-keyword">this</span>.refs.root).show(); $(<span class="hljs-string">"#layer"</span>).css(<span class="hljs-string">"background"</span>,<span class="hljs-string">"rgba(112,112,112,0.6)"</span>); }, close:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ $(<span class="hljs-keyword">this</span>.refs.root).hide(); $(<span class="hljs-string">"#layer"</span>).css(<span class="hljs-string">"background"</span>,<span class="hljs-string">"rgba(0,0,0,0)"</span>); } }); <span class="hljs-keyword">var</span> ModalWidget=React.createClass({ render:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-keyword">return</span>( <span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">BootstrapButton</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"btn-default"</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.showModal}</span>></span> show <span class="hljs-tag"></<span class="hljs-title">BootstrapButton</span>></span> <span class="hljs-tag"><<span class="hljs-title">BootstrapModal</span> <span class="hljs-attribute">ref</span>=<span class="hljs-value">"modal"</span>></span> <span class="hljs-tag"></<span class="hljs-title">BootstrapModal</span>></span> <span class="hljs-tag"></<span class="hljs-title">div</span>></span> )</span>; }, showModal:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ {<span class="hljs-keyword">this</span>.refs.modal.open()}; } }); ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">ModalWidget</span>/></span>,$("#container")[0]);</span> |
from:http://my.oschina.net/lonelydawn/blog/699696