【玩轉React】關於React你須要知道的事兒

前言

隨着前端技術的迅猛發展，各類前端框架也隨勢崛起，但歸根結底，支撐每一款web框架流行的強大因素都是它能更好地服務於業務。React天然也不例外，它的開發者當初正在開發Facebook的一個廣告系統，因爲不知足於當下任何的MVC框架，因此就本身寫了一套UI框架，因而乎大名鼎鼎的React就由此誕生了。React的出現無疑爲web開發帶來了顛覆性的改變，多少開發者夜以繼日只爲體驗一把React帶來的快感。本文就將帶領你們一塊兒領略一番React的理念、特點與情懷。

1. React不是一款MVC框架

咱們首先要認清的事實就是，React不一樣於咱們以前經常使用的MVC框架，如AngularJS、Backbone等，由於React只專一於view層（即MVC中的V）的表現，它是一個用於構建前端可複用UI組件的庫，同時，當數據發生變化時，React會及時有效地更新和渲染相應的組件。對於愈來愈複雜的前端界面，尤爲是對於數據不斷變化的web應用，React實現了將變化的數據高效無誤的反映在頁面上。

下面摘一句React官方doc中的一句話：

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

2. 使用JSX取代HTML模板

JSX是React的核心概念之一，JSX並非一種新語言，它是對JavaScript語言的擴展，但並無改變JavaScript的語法，看起來很像XML。JSX使用基於XML的方式表達組件的嵌套，保持和HTML一致的結構，語法上除了在描述組件上比較特別之外，其它基本和Javascript保持一致。 而且最終React會把全部的JSX都編譯爲JS。

咱們先來看一個小例子：

var element = <div className="title">
        <h1>Hello World</h1>
    </div>;
ReactDOM.render(element, document.body);

從該例子能夠看出，React實現了直接將HTML嵌入到JavaScript中的能力，相信很大一部分人剛接觸JSX這種語法時，都心存懷疑，由於多少年咱們一直強調MVC，即表現層與邏輯層是要分離的，咱們使用HTML模板的目的也是爲了不表現層與邏輯層的耦合。但React使用JSX的這種設計思想，彷彿讓咱們一晚上回到解放前。使用JSX的好處究竟是什麼呢？

其實，咱們最初使用HTML模板的目的是讓表現層更加獨立，這樣對HTML的修改就變得更加簡單，不須要去看邏輯代碼。但現在，web應用已經變得愈來愈複雜，模板對應的邏輯層代碼也是嚴重依賴於模板DOM結構，這就形成了表現層與邏輯層的嚴重耦合，最初不看邏輯而簡單修改界面的想法也打破了。換句話說，表現層和邏輯層仍是互不可分的。並且，爲了模板與邏輯的良好合做，還不得不引入不少新概念。咱們拿AngularJS舉例，使用AngularJS確實從結構上分離了表現層與邏輯層，可是HTML裏卻混入了大量的標記屬性，並且，初學者若是不懂AnjularJS的語法，根本不明白HTML中標記屬性的寓意何在，由此學習難度與成本也大幅度提高。

說到這兒，咱們大概就能體會到React使用JSX的獨到之處了。JSX除了使用XML標記的方式去直接聲明界面之外，並無增長其它未知的語法與標記，這不但下降了學習成本，讓初學者更快地上手使用React，並且使寫出的代碼可讀性更高，更易於理解。

另外，雖然React推薦使用JSX，但並非必須的，咱們也能夠徹底使用JavaScript進行開發，但JSX在定義相似HTML的樹形結構時，很是簡潔明瞭，下面的例子是不使用JSX和使用JSX開發的對比：

#不使用JSX，重複調用React.createElement方法
React.render(
    React.createElement('div', null,
        React.createElement('div', null,
            React.createElement('div', null, 'Hello World')
        )
    ),
    document.body
);

#使用JSX，簡潔明瞭的相似HTML樹形結構
React.render(
    <div>
        <div>
            <div>Hello World</div>
        </div>
    </div>,
    document.body
);

因此，有JSX這種好東西，咱們有什麼理由不用呢？

3. 一切皆組件

組件，即被獨立封裝的可複用UI部件。組件也是React的核心思想之一。React讓咱們從新規劃界面，把任何一個功能獨立的模塊都定義成組件。一個個的組件經過不斷複用，組合與嵌套等，構成一套完整的UI界面。因此說，使用React開發的界面一切皆爲組件。

組件的概念並不難理解，最重要的仍是組件之間的交互。React爲每一個組件都提供一個render方法，這個方法返回組件的實例。組件有兩個重要的概念：props和state，他們的做用都是用於描述組件的狀態。props是組件對外交互的接口，是一種父級向子級傳遞數據的方式；state用於記錄組件的不一樣狀態，React把組件當作是一個狀態機，經過與用戶的交互，實現不一樣狀態，而後從新渲染組件，讓UI界面及時有效地隨數據變化而變化。

如下是在組件中使用state和props的應用實例。咱們能夠在父組件中設置state，並經過在子組件上使用props將其傳遞到子組件上。

var MainCom = React.createClass({
  getInitialState: function() {
    return {
      message: "Learn React",
      link: "https://facebook.github.io/react/"
    };
  },
 
  render: function() {
    return (
      <div>
        <Message message={this.state.message} />
        <Link link={this.state.link} />
      </div>
    );
  }
});

var Message = React.createClass({
  render: function() {
    return (
      <h1>{this.props.message}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.link}>
        {this.props.link}
      </a>
    );
  }
});

ReactDOM.render(
  <MainCom />,
  document.getElementById('main-container')
);

組件化的方式帶來了UI功能模塊之間的分離。對於MVC開發模式來講，開發者將實現表現層，數據層，控制層的分離。對於React而言，則徹底是一個新的思路，開發者從功能的角度出發，將UI界面分紅不一樣的組件，每一個組件都獨立封裝。

4. 虛擬DOM提高性能

傳統的web開發中，咱們一般使用JS或jQuery操做DOM的方式將不斷變化的數據實時地反映到頁面上，隨着頁面邏輯複雜度的提高，頻繁大量的DOM操做每每會形成網站性能較低，代碼也變得愈來愈難維護。即便使用了MVC框架來從新架構代碼，但也沒有辦法減小你所維護的狀態，也就是說沒有辦法減小DOM操做。

後來又出現了MVVM模式，經過視圖模板和狀態的雙向綁定，雙向綁定引擎就會在狀態更新的時候自動更新視圖。MVVM模式很大程度的減小了視圖更新的邏輯，即減小了DOM操做。但這種方法也是存在問題的，每次狀態發生變化時，模板引擎都會從新渲染整個視圖，即用新的視圖替換掉舊的視圖。咱們知道，這樣作是影響性能的，由於即便一處小小的修改都會引發從新渲染DOM。

在React的思想裏，是徹底不須要操做DOM的。React提出了新概念，即虛擬DOM。使用React進行開發時，全部的DOM構造都是經過虛擬DOM進行的，每當數據發生變化時，React都會從新構造DOM樹，而後將新構造的DOM樹與上一次的DOM樹進行對比（這就用到了React的DOM Diff算法），獲得二者之間的差別後，僅需將變化的DOM部分進行更新。因爲每次生成虛擬DOM都很快，DOM Diff算法找出兩個DOM樹之間的差別也很快（時間複雜度O(n)），因此跟傳統的操做DOM相比，使用虛擬DOM的方法在速度和性能上的優點是十分明顯的。

咱們舉一個簡單的例子，假設咱們有一個list以下：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

如今想把它更新成：

<ul>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

咱們傳統的作法是先刪除1，2，3，4這些節點，而後再追加6，7，8，9，10這幾個新節點，這就意味這會有4次刪除操做和5次添加操做。但React會把舊的和新的DOM樹作一下Diff，而後發現其實不用刪除1，2，3，4節點，而是能夠直接修改這四個節點的innerHTML爲6，7，8，9，而後再追加一個節點10就能夠了。這樣就比9次節點DOM操做快多了。

5. 總結

本文只是我的對React的設計思想的一些淺顯的認識，寫的比較零散，固然React的優勢還有不少的，還待你們去慢慢學習與體會。固然，事物都有相對性，在實際的開發過程當中，仍是要挑選最適合的框架，而不是盲目從衆。