React 簡(jiǎn)單介紹

2020-6-2    前端達(dá)人

why React?

React是Facebook開發(fā)的一款JS庫(kù),那么Facebook為什么要建造React呢,主要為了解決什么問(wèn)題,通過(guò)這個(gè)又是如何解決的?

從這幾個(gè)問(wèn)題出發(fā)我就在網(wǎng)上搜查了一下,有這樣的解釋。

Facebook認(rèn)為MVC無(wú)法滿足他們的擴(kuò)展需求,由于他們非常巨大的代碼庫(kù)和龐大的組織,使得MVC很快變得非常復(fù)復(fù)雜,每當(dāng)需要添加一項(xiàng)新的功能或特性時(shí),系統(tǒng)的復(fù)雜度就成級(jí)數(shù)增長(zhǎng),致使代碼變得脆弱和不可預(yù)測(cè),結(jié)果導(dǎo)致他們的MVC正在土崩瓦解。認(rèn)為MVC不適合大規(guī)模應(yīng)用,當(dāng)系統(tǒng)中有很多的模型和相應(yīng)的視圖時(shí),其復(fù)雜度就會(huì)迅速擴(kuò)大,非常難以理解和調(diào)試,特別是模型和視圖間可能存在的雙向數(shù)據(jù)流動(dòng)。

解決這個(gè)問(wèn)題需要“以某種方式組織代碼,使其更加可預(yù)測(cè)”,這通過(guò)他們(Facebook)提出的Flux和React已經(jīng)完成。


Flux是一個(gè)系統(tǒng)架構(gòu),用于推進(jìn)應(yīng)用中的數(shù)據(jù)單向流動(dòng)。React是一個(gè)JavaScript框架,用于構(gòu)建“可預(yù)期的”和“聲明式的”Web用戶界面,它已經(jīng)使Facebook更快地開發(fā)Web應(yīng)用


對(duì)于Flux,目前還沒(méi)怎么研究,不怎么懂,這里就先把Flux的圖放上來(lái),有興趣或者了解的可以再分享下,這里主要說(shuō)下React。

微信截圖_20200602202548.png

那么React是解決什么問(wèn)題的,在官網(wǎng)可以找到這樣一句話:

We built React to solve one problem: building large applications with data that changes over time.


構(gòu)建那些數(shù)據(jù)會(huì)隨時(shí)間改變的大型應(yīng)用,做這些,React有兩個(gè)主要的特點(diǎn):

  1. 簡(jiǎn)單
    簡(jiǎn)單的表述任意時(shí)間點(diǎn)你的應(yīng)用應(yīng)該是什么樣子的,React將會(huì)自動(dòng)的管理UI界面更新當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候。
  2. 聲明式
    在數(shù)據(jù)發(fā)生變化的時(shí)候,React從概念上講與點(diǎn)擊了F5一樣,實(shí)際上它僅僅是更新了變化的一部分而已。
    React是關(guān)于構(gòu)造可重用組件的,實(shí)際上,使用React你做的僅僅是構(gòu)建組建。通過(guò)封裝,使得組件代碼復(fù)用、測(cè)試以及關(guān)注點(diǎn)分離更加容易。

另外在React官網(wǎng)上,通過(guò)《Why did we build React?》為什么我們要建造React的文檔中還可以了解到以下四點(diǎn):

  • React不是一個(gè)MVC框架
  • React不使用模板
  • 響應(yīng)式更新非常簡(jiǎn)單
  • HTML5僅僅是個(gè)開始

React主要的原理

Virtual DOM 虛擬DOM
傳統(tǒng)的web應(yīng)用,操作DOM一般是直接更新操作的,但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對(duì)DOM的操作,提供了一種不同的而又強(qiáng)大的方式來(lái)更新DOM,代替直接的DOM操作。就是Virtual DOM,一個(gè)輕量級(jí)的虛擬的DOM,就是React抽象出來(lái)的一個(gè)對(duì)象,描述dom應(yīng)該什么樣子的,應(yīng)該如何呈現(xiàn)。通過(guò)這個(gè)Virtual DOM去更新真實(shí)的DOM,由這個(gè)Virtual DOM管理真實(shí)DOM的更新。

為什么通過(guò)這多一層的Virtual DOM操作就能更快呢? 這是因?yàn)镽eact有個(gè)diff算法,更新Virtual DOM并不保證馬上影響真實(shí)的DOM,React會(huì)等到事件循環(huán)結(jié)束,然后利用這個(gè)diff算法,通過(guò)當(dāng)前新的dom表述與之前的作比較,計(jì)算出最小的步驟更新真實(shí)的DOM。


微信截圖_20200602202557.png

Components 組件
在DOM樹上的節(jié)點(diǎn)被稱為元素,在這里則不同,Virtual DOM上稱為commponent。Virtual DOM的節(jié)點(diǎn)就是一個(gè)完整抽象的組件,它是由commponents組成。


component 的使用在 React 里極為重要, 因?yàn)?components 的存在讓計(jì)算 DOM diff 更。

State 和 Render
React是如何呈現(xiàn)真實(shí)的DOM,如何渲染組件,什么時(shí)候渲染,怎么同步更新的,這就需要簡(jiǎn)單了解下State和Render了。state屬性包含定義組件所需要的一些數(shù)據(jù),當(dāng)數(shù)據(jù)發(fā)生變化時(shí),將會(huì)調(diào)用Render重現(xiàn)渲染,這里只能通過(guò)提供的setState方法更新數(shù)據(jù)。

好了,說(shuō)了這么多,下面看寫代碼吧,先看一個(gè)官網(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>

這個(gè)很簡(jiǎn)單,瀏覽器訪問(wèn),可以看到Hello, world!字樣。JSXTransformer.js是支持解析JSX語(yǔ)法的,JSX是可以在Javascript中寫html代碼的一種語(yǔ)法。如果不喜歡,React也提供原生Javascript的方法。

再來(lái)看下另外一個(gè)例子:



<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: "我在寫一條評(píng)論~!"},
            {author: "關(guān)羽", text: "2貨,都知道你在寫的是一條評(píng)論。。"},
            {author: "劉備", text: "哎,咋跟這倆逗逼結(jié)拜了!"}
        ];

        var converter = new Showdown.converter();//markdown

        /** 組件結(jié)構(gòu):
            <CommentBox>
                <CommentList>
                    <Comment />
                </CommentList>
                <CommentForm />
            </CommentBox>
        */
        //評(píng)論內(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>
                );
            }
        });
        //評(píng)論列表組件
        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>
                );
            }
        });

        //評(píng)論表單組件
        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>
                );
            }
        });

        //評(píng)論塊組件
        var CommentBox = React.createClass({
            loadCommentsFromServer: function (){
                this.setState({data: staticData});
                /*
                方便起見,這里就不走服務(wù)端了,可以自己嘗試
                $.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});
            },
            //初始化 相當(dāng)于構(gòu)造函數(shù)
            getInitialState: function (){
                return {data: []};
            },
            //組件添加的時(shí)候運(yùn)行
            componentDidMount: function (){
                this.loadCommentsFromServer();
                this.interval = setInterval(this.loadCommentsFromServer, this.props.pollInterval);
            },
            //組件刪除的時(shí)候運(yùn)行
            componentWillUnmount: function() {
                clearInterval(this.interval);
            },
            //調(diào)用setState或者父級(jí)組件重新渲染不同的props時(shí)才會(huì)重新調(diào)用
            render: function (){
                return (
                    <div className="commentBox">
                        <h1>Comments</h1>
                        <CommentList data={this.state.data}/>
                        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
                    </div>
                );
            }
        });

        //當(dāng)前目錄需要有comments.json文件
        //這里定義屬性,如url、pollInterval,包含在props屬性中
        React.render(
            <CommentBox url="comments.json" pollInterval="2000" />,
            document.getElementById("content")
        );
        </script>
    </body>
</html>


乍一看挺多,主要看腳本部分就可以了。方便起見,這里都沒(méi)有走后端。定義了一個(gè)全局的變量staticData,可權(quán)當(dāng)是走服務(wù)端,通過(guò)瀏覽器的控制臺(tái)改變staticData的值,查看下效果,提交一條評(píng)論,查看下staticData的值的變化。

應(yīng)用情況

國(guó)外應(yīng)用的較多,facebook、Yahoo、Reddit等。在github可以看到一個(gè)列表Sites-Using-React,國(guó)內(nèi)的話,查了查,貌似比較少,目前知道的有一個(gè)杭州大搜車。大多技術(shù)要在國(guó)內(nèi)應(yīng)用起來(lái)一般是較慢的,不過(guò)React確實(shí)感覺(jué)比較特殊,特別是UI的組件化和Virtual DOM的思想,我個(gè)人比較看好,有興趣繼續(xù)研究研究。

比較分析

和其他一些js框架相比,React怎樣,比如Backbone、Angular等。

  • React不是一個(gè)MVC框架,它是構(gòu)建易于可重復(fù)調(diào)用的web組件,側(cè)重于UI, 也就是view層
  • 其次React是單向的從數(shù)據(jù)到視圖的渲染,非雙向數(shù)據(jù)綁定
  • 不直接操作DOM對(duì)象,而是通過(guò)虛擬DOM通過(guò)diff算法以最小的步驟作用到真實(shí)的DOM上。
  • 不便于直接操作DOM,大多數(shù)時(shí)間只是對(duì) virtual DOM 進(jìn)行編程

作者:RK_CODER
鏈接:https://www.jianshu.com/p/ae482813b791
來(lái)源:簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔