React · 前端開發手冊

React 起源于 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設Instagram 的網站。做出來以后，發現這套東西很好用，就在2013年5月開源了. React是單向數據流動 # 參考 - https://reactjs.org - http://react-china.org/ - http://www.runoob.com/react/react-tutorial.html - http://www.css88.com/react/ ## why React？ React是Facebook開發的一款JS庫，那么Facebook為什么要建造React呢，主要為了解決什么問題，通過這個又是如何解決的？ Facebook認為MVC無法滿足他們的擴展需求，由于他們非常巨大的代碼庫和龐大的組織，使得MVC很快變得非常復復雜，每當需要添加一項新的功能或特性時，系統的復雜度就成級數增長，致使代碼變得脆弱和不可預測，結果導致他們的MVC正在土崩瓦解。認為MVC不適合大規模應用，當系統中有很多的模型和相應的視圖時，其復雜度就會迅速擴大，非常難以理解和調試，特別是模型和視圖間可能存在的雙向數據流動。解決這個問題需要“以某種方式組織代碼，使其更加可預測”，這通過他們(Facebook)提出的Flux和React已經完成。 > Flux是一個系統架構，用于推進應用中的數據單向流動。React是一個JavaScript框架，用于構建“可預期的”和“聲明式的”Web用戶界面，它已經使Facebook更快地開發Web應用 ## Flux ![](https://box.kancloud.cn/4ffe1e4753c0e3aa540e40e76b67c231_390x219.png) ## React 那么React是解決什么問題的，在官網可以找到這樣一句話： > We built React to solve one problem: building large applications with data that changes over time. 構建那些數據會隨時間改變的大型應用，做這些，React有兩個主要的特點： 1. 簡單簡單的表述任意時間點你的應用應該是什么樣子的，React將會自動的管理UI界面更新當數據發生變化的時候。 1. 聲明式在數據發生變化的時候，React從概念上講與點擊了F5一樣，實際上它僅僅是更新了變化的一部分而已。 React是關于構造可重用組件的，實際上，使用React你做的僅僅是構建組建。通過封裝，使得組件代碼復用、測試以及關注點分離更加容易。另外在React官網上，通過《Why did we build React?》為什么我們要建造React的文檔中還可以了解到以下四點： - React不是一個MVC框架 - React不使用模板 - 響應式更新非常簡單 - HTML5僅僅是個開始具體也可以看我前面一篇文章《[為什么我們要造React？](https://www.jianshu.com/p/dc54c5ba246d)》。 ### React主要的原理 #### Virtual DOM 虛擬DOM 傳統的web應用，操作DOM一般是直接更新操作的，但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對DOM的操作，提供了一種不同的而又強大的方式來更新DOM，代替直接的DOM操作。就是**Virtual DOM**,一個輕量級的虛擬的DOM，就是React抽象出來的一個對象，描述dom應該什么樣子的，應該如何呈現。通過這個Virtual DOM去更新真實的DOM，由這個Virtual DOM管理真實DOM的更新。為什么通過這多一層的Virtual DOM操作就能更快呢？這是因為React有個diff算法，更新Virtual DOM并不保證馬上影響真實的DOM，React會等到事件循環結束，然后利用這個diff算法，通過當前新的dom表述與之前的作比較，計算出最小的步驟更新真實的DOM。 :-: ![](https://box.kancloud.cn/71714ac17ba455a31919f815881ba5a0_300x66.png) virtual DOM #### Components 組件在DOM樹上的節點被稱為元素，在這里則不同，Virtual DOM上稱為commponent。Virtual DOM的節點就是一個完整抽象的組件，它是由commponents組成。 > component 的使用在 React 里極為重要, 因為 components 的存在讓計算 DOM diff 更高效。 #### State 和 Render React是如何呈現真實的DOM，如何渲染組件，什么時候渲染，怎么同步更新的，這就需要簡單了解下State和Render了。state屬性包含定義組件所需要的一些數據，當數據發生變化時，將會調用Render重現渲染，這里只能通過提供的setState方法更新數據。好了，說了這么多，下面看寫代碼吧，先看一個官網上提供的Hello World的示例： ~~~ <!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> ~~~ 這個很簡單，瀏覽器訪問，可以看到Hello, world!字樣。JSXTransformer.js是支持解析JSX語法的，JSX是可以在Javascript中寫html代碼的一種語法。如果不喜歡，React也提供原生Javascript的方法。再來看下另外一個例子： ~~~ <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> ~~~ 乍一看挺多，主要看腳本部分就可以了。方便起見，這里都沒有走后端。定義了一個全局的變量staticData，可權當是走服務端，通過瀏覽器的控制臺改變staticData的值，查看下效果，提交一條評論，查看下staticData的值的變化。 ## 應用情況國外應用的較多，facebook、Yahoo、Reddit等。在github可以看到一個列表Sites-Using-React，國內的話，查了查，貌似比較少，目前知道的有一個杭州大搜車。大多技術要在國內應用起來一般是較慢的，不過React確實感覺比較特殊，特別是UI的組件化和Virtual DOM的思想，我個人比較看好，有興趣繼續研究研究。 ## 比較分析和其他一些js框架相比，React怎樣，比如Backbone、Angular等。 - React不是一個MVC框架，它是構建易于可重復調用的web組件，側重于UI, 也就是view層 - 其次React是單向的從數據到視圖的渲染，非雙向數據綁定 - 不直接操作DOM對象，而是通過虛擬DOM通過diff算法以最小的步驟作用到真實的DOM上。 - 不便于直接操作DOM，大多數時間只是對 virtual DOM 進行編程