2020-6-2 前端達人
React是Facebook開發(fā)的一款JS庫,那么Facebook為什么要建造React呢,主要為了解決什么問題,通過這個又是如何解決的?
從這幾個問題出發(fā)我就在網(wǎng)上搜查了一下,有這樣的解釋。
Facebook認為MVC無法滿足他們的擴展需求,由于他們非常巨大的代碼庫和龐大的組織,使得MVC很快變得非常復復雜,每當需要添加一項新的功能或特性時,系統(tǒng)的復雜度就成級數(shù)增長,致使代碼變得脆弱和不可預測,結(jié)果導致他們的MVC正在土崩瓦解。認為MVC不適合大規(guī)模應用,當系統(tǒng)中有很多的模型和相應的視圖時,其復雜度就會迅速擴大,非常難以理解和調(diào)試,特別是模型和視圖間可能存在的雙向數(shù)據(jù)流動。
解決這個問題需要“以某種方式組織代碼,使其更加可預測”,這通過他們(Facebook)提出的Flux和React已經(jīng)完成。
Flux
是一個系統(tǒng)架構(gòu),用于推進應用中的數(shù)據(jù)單向流動。React
是一個JavaScript框架,用于構(gòu)建“可預期的”和“聲明式的”Web用戶界面,它已經(jīng)使Facebook更快地開發(fā)Web應用
對于Flux,目前還沒怎么研究,不怎么懂,這里就先把Flux的圖放上來,有興趣或者了解的可以再分享下,這里主要說下React。
那么React是解決什么問題的,在官網(wǎng)可以找到這樣一句話:
We built React to solve one problem: building large applications with data that changes over time.
構(gòu)建那些數(shù)據(jù)會隨時間改變的大型應用,做這些,React有兩個主要的特點:
另外在React官網(wǎng)上,通過《Why did we build React?》為什么我們要建造React的文檔中還可以了解到以下四點:
Virtual DOM 虛擬DOM
傳統(tǒng)的web應用,操作DOM一般是直接更新操作的,但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對DOM的操作,提供了一種不同的而又強大的方式來更新DOM,代替直接的DOM操作。就是Virtual DOM
,一個輕量級的虛擬的DOM,就是React抽象出來的一個對象,描述dom應該什么樣子的,應該如何呈現(xiàn)。通過這個Virtual DOM去更新真實的DOM,由這個Virtual DOM管理真實DOM的更新。
為什么通過這多一層的Virtual DOM操作就能更快呢? 這是因為React有個diff算法,更新Virtual DOM并不保證馬上影響真實的DOM,React會等到事件循環(huán)結(jié)束,然后利用這個diff算法,通過當前新的dom表述與之前的作比較,計算出最小的步驟更新真實的DOM。
component 的使用在 React 里極為重要, 因為 components 的存在讓計算 DOM diff 更。
State 和 Render
React是如何呈現(xiàn)真實的DOM,如何渲染組件,什么時候渲染,怎么同步更新的,這就需要簡單了解下State和Render了。state屬性包含定義組件所需要的一些數(shù)據(jù),當數(shù)據(jù)發(fā)生變化時,將會調(diào)用Render重現(xiàn)渲染,這里只能通過提供的setState方法更新數(shù)據(jù)。
好了,說了這么多,下面看寫代碼吧,先看一個官網(wǎng)上提供的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: "關(guān)羽", text: "2貨,都知道你在寫的是一條評論。。"}, {author: "劉備", text: "哎,咋跟這倆逗逼結(jié)拜了!"} ]; var converter = new Showdown.converter();//markdown /** 組件結(jié)構(gòu): <CommentBox> <CommentList> <Comment /> </CommentList> <CommentForm /> </CommentBox> */ //評論內(nèi)容組件 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}); }, //初始化 相當于構(gòu)造函數(shù) getInitialState: function (){ return {data: []}; }, //組件添加的時候運行 componentDidMount: function (){ this.loadCommentsFromServer(); this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval); }, //組件刪除的時候運行 componentWillUnmount: function() { clearInterval(this.interval); }, //調(diào)用setState或者父級組件重新渲染不同的props時才會重新調(diào)用 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
,可權(quán)當是走服務端,通過瀏覽器的控制臺改變staticData
的值,查看下效果,提交一條評論,查看下staticData的值的變化。
國外應用的較多,facebook、Yahoo、Reddit等。在github可以看到一個列表Sites-Using-React,國內(nèi)的話,查了查,貌似比較少,目前知道的有一個杭州大搜車。大多技術(shù)要在國內(nèi)應用起來一般是較慢的,不過React確實感覺比較特殊,特別是UI的組件化和Virtual DOM的思想,我個人比較看好,有興趣繼續(xù)研究研究。
和其他一些js框架相比,React怎樣,比如Backbone、Angular等。