標籤：
簡介：
React是Facebook開發的一款JS庫
React解決了什麼問題？
1）、首先是以往mvc模式的缺陷，當程式碼程式庫龐大時，mvc非常的複雜，每添加新的功能，項目的複雜度就幾何倍的增長，導致代碼的維護性很差，所以mvc不合適太大型的前端應用。
2）模型和視圖間可能存在的雙向資料流動
React的特點是什嗎？
1）簡單
2）聲明式
另外在react官網上面（http://facebook.github.io/react/blog/2013/06/05/why-react.html），還可以瞭解到有這些特點：
1）React不是一個MVC架構
2）React不使用模板
3）響應式更新非常簡單
4）HTML僅僅是個開始
React主要的原理
1）virtual dom 虛擬dom
2）Components 組件
3）State 和 Render
just demo:
<!DOCTYPE html><html> <head> <script src="http://fb.me/react-0.12.1.js"></script> <script src="http://fb.me/JSXTransformer-0.12.1.js"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘) ); </script> </body></html>View Code
just demo:
<html> <head> <title>Hello React</title> <script src="http://fb.me/react-0.12.1.js"></script> <script src="http://fb.me/JSXTransformer-0.12.1.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script> <style> #content{ width: 800px; margin: 0 auto; padding: 5px 10px; background-color:#eee; } .commentBox h1{ background-color: #bbb; } .commentList{ border: 1px solid yellow; padding:10px; } .commentList .comment{ border: 1px solid #bbb; padding-left: 10px; margin-bottom:10px; } .commentList .commentAuthor{ font-size: 20px; } .commentForm{ margin-top: 20px; border: 1px solid red; padding:10px; } .commentForm textarea{ width:100%; height:50px; margin:10px 0 10px 2px; } </style> </head> <body> <div id="content"></div> <script type="text/jsx"> var staticData = [ {author: "張飛", text: "我在寫一條評論~！"}, {author: "關羽", text: "2貨，都知道你在寫的是一條評論。。"}, {author: "劉備", text: "哎，咋跟這倆逗逼結拜了！"} ]; var converter = new Showdown.converter();//markdown /** 組件結構： <CommentBox> <CommentList> <Comment /> </CommentList> <CommentForm /> </CommentBox> */ //評論內容組件 var Comment = React.createClass({ render: function (){ var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author}: </h2> <span dangerouslySetInnerHTML={{__html: rawMarkup}} /> </div> ); } }); //評論列表組件 var CommentList = React.createClass({ render: function (){ var commentNodes = this.props.data.map(function (comment){ return ( <Comment author={comment.author}> {comment.text} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } }); //評論表單組件 var CommentForm = React.createClass({ handleSubmit: function (e){ e.preventDefault(); var author = this.refs.author.getDOMNode().value.trim(); var text = this.refs.text.getDOMNode().value.trim(); if(!author || !text){ return; } this.props.onCommentSubmit({author: author, text: text}); this.refs.author.getDOMNode().value = ‘‘; this.refs.text.getDOMNode().value = ‘‘; return; }, render: function (){ return ( <form className="commentForm" onSubmit={this.handleSubmit}> <input type="text" placeholder="Your name" ref="author" /><br/> <textarea type="text" placeholder="Say something..." ref="text" ></textarea><br/> <input type="submit" value="Post" /> </form> ); } }); //評論塊組件 var CommentBox = React.createClass({ loadCommentsFromServer: function (){ this.setState({data: staticData}); /* 方便起見，這裡就不走服務端了，可以自己嘗試 $.ajax({ url: this.props.url + "?_t=" + new Date().valueOf(), dataType: ‘json‘, success: function (data){ this.setState({data: data}); }.bind(this), error: function (xhr, status, err){ console.error(this.props.url, status, err.toString()); }.bind(this) }); */ }, handleCommentSubmit: function (comment){ //TODO: submit to the server and refresh the list var comments = this.state.data; var newComments = comments.concat([comment]); //這裡也不向後端提交了 staticData = newComments; this.setState({data: newComments}); }, //初始化 相當於建構函式 getInitialState: function (){ return {data: []}; }, //組件添加的時候運行 componentDidMount: function (){ this.loadCommentsFromServer(); this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, //組件刪除的時候運行 componentWillUnmount: function() { clearInterval(this.interval); }, //調用setState或者父級組件重新渲染不同的props時才會重新調用 render: function (){ return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.state.data}/> <CommentForm onCommentSubmit={this.handleCommentSubmit} /> </div> ); } }); //目前的目錄需要有comments.json檔案 //這裡定義屬性，如url、pollInterval，包含在props屬性中 React.render( <CommentBox url="comments.json" pollInterval="2000" />, document.getElementById("content") ); </script> </body></html>View Code
和其他一些js架構相比，React怎樣，比如Backbone、Angular等。
1)react不是一個MVC，它是構建易於可重複調用的web組件，側重於UI, 也就是view層
2)React是單向的從資料到視圖的渲染，非雙向資料繫結
3)不直接操作dom對象，而是虛擬dom通過diff演算法以最小的步驟作用到真實的dom上。
4)不便於直接操作dom，大多數時間只是對virtual dom 進行編程
參考：
http://facebook.github.io/react/blog/2013/06/05/why-react.html
https://github.com/facebook/react
react學習與簡介
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
