天天看點
傳回

React 簡單介紹React 簡單介紹

React 簡單介紹

React 簡單介紹React 簡單介紹

作者 RK_CODER 關注

2014.12.10 17:37* 字數 2516 閱讀 55715評論 6喜歡 70

why React？

React是Facebook開發的一款JS庫，那麼Facebook為什麼要建造React呢，主要為了解決什麼問題，通過這個又是如何解決的？

從這幾個問題出發我就在網上搜查了一下，有這樣的解釋。

Facebook認為MVC無法滿足他們的擴充需求，由于他們非常巨大的代碼庫和龐大的組織，使得MVC很快變得非常複複雜，每當需要添加一項新的功能或特性時，系統的複雜度就成級數增長，緻使代碼變得脆弱和不可預測，結果導緻他們的MVC正在土崩瓦解。認為MVC不适合大規模應用，當系統中有很多的模型和相應的視圖時，其複雜度就會迅速擴大，非常難以了解和調試，特别是模型和視圖間可能存在的雙向資料流動。

解決這個問題需要“以某種方式組織代碼，使其更加可預測”，這通過他們(Facebook)提出的Flux和React已經完成。

Flux

 是一個系統架構，用于推進應用中的資料單向流動。

React

 是一個JavaScript架構，用于建構“可預期的”和“聲明式的”Web使用者界面，它已經使Facebook更快地開發Web應用

對于Flux，目前還沒怎麼研究，不怎麼懂，這裡就先把Flux的圖放上來，有興趣或者了解的可以再分享下，這裡主要說下React。

Flux

那麼React是解決什麼問題的，在官網可以找到這樣一句話：

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

建構那些資料會随時間改變的大型應用，做這些，React有兩個主要的特點：

  1. 簡單

    簡單的表述任意時間點你的應用應該是什麼樣子的，React将會自動的管理UI界面更新當資料發生變化的時候。

  2. 聲明式

    在資料發生變化的時候，React從概念上講與點選了F5一樣，實際上它僅僅是更新了變化的一部分而已。

    React是關于構造可重用元件的，實際上，使用React你做的僅僅是建構組建。通過封裝，使得元件代碼複用、測試以及關注點分離更加容易。

另外在React官網上，通過《Why did we build React?》為什麼我們要建造React的文檔中還可以了解到以下四點：

  • React不是一個MVC架構
  • React不使用模闆
  • 響應式更新非常簡單
  • HTML5僅僅是個開始

具體也可以看我前面一篇文章《為什麼我們要造React？》。

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。

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{
             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{
            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 進行程式設計

好了，就這些了，檢視了不少資料，東拼西湊出來，權當整理吧，當然，整理的也可能很爛，哈哈

将就吧~~

參考資料

    1. React 官網
    2. React github
    3. React中文社群
    4. Facebook：MVC不适合大規模應用，改用Flux
    5. Why did we build React?
    6. Facebook 的 React 架構解析
    7. 關于從 Backbone 轉向 React 的思考
    8. React 的 diff 算法
上一篇: docker run hangs問題排查記錄
下一篇: ubuntu一些常有操作