[[143148]]

React不僅是一個強(qiáng)大的交互式UI渲染類庫，而且還提供了一個用于處理數(shù)據(jù)和用戶輸入的***方法。它倡導(dǎo)可重用并且易于測試的輕量級組件。不僅在Web應(yīng)用中，這些重要的特性同樣適用于其他的技術(shù)場景。

在這一部分內(nèi)容中，我們將會看到如何在下面的場景中使用React：

• 桌面應(yīng)用
• 游戲
• 電子郵件
• 繪圖

桌面應(yīng)用

借助 atom-shell 或者 node-webkit 這類項(xiàng)目，我們可以在桌面上運(yùn)行一個 Web應(yīng)用。來自 Github 的 Atom Editor 就是使用 atom-shell 以及 React創(chuàng)建的。

下面將 atom-shell 應(yīng)用于我們的SurveyBuilder。

首先，從這里下載并且安裝 atom-shell。使用下面的 desktop 腳本運(yùn)行 atom-shell，就可以在窗口中打開該應(yīng)用。

// desktop.js 
var app = require('app'); 
var BrowserWindow = require('browser-window'); 
// 加載 SurveyBuilder 服務(wù)，然后啟動它。 
var server = require('./server/server'); 
server.listen('8080'); 
// 向我們的服務(wù)提供崩潰報(bào)告。 
require('crash-reporter').start(); 
// 保留 window 對象的一個全局引用。 
// 當(dāng) javascript 對象被當(dāng)作垃圾回收時，窗口將會自動關(guān)閉。 
var mainWindow = null; 
// 當(dāng)所有窗口都關(guān)閉時退出。 
app.on('window-all-closed', function() { 
  if (process.platform != 'darwin') 
    app.quit(); 
}); 
// 當(dāng) atom-shell 完成所有初始化工作并準(zhǔn)備創(chuàng)建瀏覽器窗口時，會調(diào)用下面的方法。 
app.on('ready', function() { 
  // 創(chuàng)建瀏覽器窗口。 
  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600 
  }); 
  // 加載應(yīng)用的 index.html 文件。 
  // mainWindow.loadUrl('file://' + __dirname + '/index.html'); 
  mainWindow.loadUrl('http://localhost:8080/'); 
  // 在窗口關(guān)閉時觸發(fā)。 
  mainWindow.on('closed', function() { 
    // 直接引用 window 對象，如果你的應(yīng)用支持多個窗口，通常需要把 window 存儲到 
    // 一個數(shù)組中。此時，你需要刪除相關(guān)聯(lián)的元素。 
    mainWindow = null; 
  }); 
}); 

借助 atom-shell 或者 node-webkit 這類項(xiàng)目，我們可以將創(chuàng)建 web的技術(shù)應(yīng)用于創(chuàng)建桌面應(yīng)用。就像開發(fā) web 應(yīng)用一樣，React同樣可以幫助你構(gòu)建強(qiáng)大的交互式桌面應(yīng)用。

游戲

通常，游戲?qū)τ脩艚换ビ泻芨叩囊螅婕倚枰皶r地對游戲狀態(tài)的改變做出響應(yīng)。相比之下，在絕大多數(shù)web應(yīng)用中，用戶不是在消費(fèi)資源就是在產(chǎn)生資源。本質(zhì)上，游戲就是一個狀態(tài)機(jī)，包括兩個基本要素：

1. 更新視圖
2. 響應(yīng)事件

在本書概覽部分，你應(yīng)該已經(jīng)注意到：React關(guān)注的范疇比較窄，僅僅包括兩件事：

1. 更新 DOM
2. 響應(yīng)事件

React 和游戲之間的相似點(diǎn)遠(yuǎn)不止這些。React 的虛擬 DOM 架構(gòu)成就了高性能的3D 游戲引擎，對于每一個想要達(dá)到的視圖狀態(tài)，渲染引擎都保證了對視圖或者DOM 的一次有效更新。

2048這個游戲的實(shí)現(xiàn)就是將 React 應(yīng)用于游戲中的一個示例。這個游戲的目的是把桌面上相匹配的數(shù)字結(jié)合在一起，直到2048。

下面，深入地看一下實(shí)現(xiàn)過程。源碼被分為兩部分。***部分是用于實(shí)現(xiàn)游戲邏輯的全局函數(shù)，第二部分是React 組件。你馬上會看到游戲桌面的初始數(shù)據(jù)結(jié)構(gòu)。

var initial_board = { 
  a1:null, a2:null, a3:null, a4:null, 
  b1:null, b2:null, b3:null, b4:null, 
  c1:null, c2:null, c3:null, c4:null, 
  d1:null, d2:null, d3:null, d4:null 
}; 

桌面的數(shù)據(jù)結(jié)構(gòu)是一個對象，它的 key 與 CSS中定義的虛擬網(wǎng)格位置直接相關(guān)。繼初始化數(shù)據(jù)結(jié)構(gòu)后，你將會看到一系列的函數(shù)對該給定數(shù)據(jù)結(jié)構(gòu)進(jìn)行操作。這些函數(shù)都按照固定的方式執(zhí)行，返回一個新的桌面并且不會改變輸入值。這使得游戲邏輯更清晰，因?yàn)榭梢詫⒃跀?shù)字方塊移動前后的桌面數(shù)據(jù)結(jié)構(gòu)進(jìn)行比較，并且在不改變游戲狀態(tài)的情況下推測出下一步。

關(guān)于數(shù)據(jù)結(jié)構(gòu)，另一個有趣的屬性是數(shù)字方塊之間在結(jié)構(gòu)上共享。所有的桌面共享了對桌面上未改變過的數(shù)字方塊的引用。這使得創(chuàng)建一個新桌面非常快，并且可以通過判斷引用是否相同來比較桌面。

這個游戲由兩個 React 組件構(gòu)成，GameBoard 和Tiles。

Tiles是一個簡單的 React 組件。每當(dāng)給它的 props 指定一個board，它總會渲染出完整的 Tiles。這給了我們利用 CSS3 transition實(shí)現(xiàn)動畫的機(jī)會。

var Tiles = React.createClass({ 
  render: function(){ 
    var board = this.props.board; 
    // 首先，將桌面的 key 排序，停止 DOM 元素的重組。 
    var tiles = used_spaces(board).sort(function(a, b) { 
      return board[a].id - board[b].id; 
    }); 
    return ( 
      <div className="board"> 
        {tiles.map(function(key){ 
          var tile = board[key]; 
          var val = tile_value(tile); 
          return ( 
            <span key={tile.id} className={key + " value" + val}> 
              {val} 
            </span> 
          ); 
        })} 
      </div> 
    ); 
  } 
}); 
<!-- 渲染數(shù)字方塊后的輸出示例 --> 
<div class="board" data-reactid=".0.1"> 
  <span class="d2 value64" data-reactid=".0.1.$2">64</span> 
  <span class="d1 value8" data-reactid=".0.1.$27">8</span> 
  <span class="c1 value8" data-reactid=".0.1.$28">8</span> 
  <span class="d3 value8" data-reactid=".0.1.$32">8</span> 
</div> 
/* 將 CSS transistion 應(yīng)用于數(shù)字方塊上的動畫 */ 
.board span{ 
  /* ... */ 
  transition: all 100ms linear; 
} 

GameBoard是一個狀態(tài)機(jī)，用于響應(yīng)按下方向鍵這一用戶事件，并與游戲的邏輯功能進(jìn)行交互，然后用一個新的桌面來更新狀態(tài)。

var GameBoard = React.createClass({ 
  getInitialState: function() { 
    return this.addTile(this.addTile(initial_board)); 
  }, 
  keyHandler: function(e) { 
    var directions = { 
      37 : left, 
      38 : up, 
      39 : right, 
      40 : down 
    }; 
    if (directions[e.keyCode] 
    && this.setBoard(fold_board(this.state, directions[e.keyCode])) 
    && Math.floor(Math.random() * 30, 0) > 0) { 
      setTimeout(function() { 
        this.setBoard(this.addTile(this.state)); 
      }.bind(this), 100); 
    } 
  }, 
  setBoard: function(new_board) { 
    if (!same_board(this.state, new_board)) { 
      this.setState(new_board); 
      return true; 
    } 
    return false; 
  }, 
  addTile: function(board) { 
    var location = available_spaces(board).sort(function() { 
      return.5 - Math.random(); 
    }).pop(); 
    if (location) { 
      var two_or_four = Math.floor(Math.random() * 2, 0) ? 2 : 4; 
      return set_tile(board, location, new_tile(two_or_four)); 
    } 
    return board; 
  }, 
  newGame: function() { 
    this.setState(this.getInitialState()); 
  }, 
  componentDidMount: function() { 
    window.addEventListener("keydown", this.keyHandler, false); 
  }, 
  render: function() { 
    var status = !can_move(this.state) ? " - Game Over!": ""; 
    return ( 
      <div className = "app" > 
        <span className = "score" > 
          Score: {score_board(this.state)} {status} 
        </span> 
        <Tiles board={this.state}/ > 
        <button onClick={this.newGame}> New Game </button> 
      </div > 
    ); 
  } 
}); 

在 GameBoard組件中，我們初始化了用于和桌面交互的鍵盤監(jiān)聽器。每一次按下方向鍵，我們都會去調(diào)用setBoard，該方法的參數(shù)是游戲邏輯中新創(chuàng)建的桌面。如果新桌面和原來的不同，我們會更新GameBoard 組件的狀態(tài)。這避免了不必要的函數(shù)執(zhí)行，同時提升了性能。

在 render 方法中，我們渲染了當(dāng)前桌面上的所有 Tile組件。通過計(jì)算游戲邏輯中的桌面并渲染出得分。

每當(dāng)我們按下方向鍵時，addTile方法會保證在桌面上添加新的數(shù)字方塊。直到桌面已經(jīng)滿了，沒有新的數(shù)字可以結(jié)合時，游戲結(jié)束。

基于以上的實(shí)現(xiàn)，為這個游戲添加一個撤銷功能就很容易了。我們可以把所有桌面的變化歷史保存在GameBoard 組件的狀態(tài)中，并且在當(dāng)前桌面上新增一個撤銷按鈕（代碼）。

這個游戲?qū)崿F(xiàn)起來非常簡單。借助React，開發(fā)者僅聚焦在游戲邏輯和用戶交互上即可，不必去關(guān)心如何保證視圖上的同步。

#p#

電子郵件

盡管 React 在創(chuàng)建 web 交互式 UI 上做了優(yōu)化，但它的核心還是渲染HTML。這意味著，我們在編寫 React應(yīng)用時的諸多優(yōu)勢，同樣可以用來編寫令人頭疼的 HTML 電子郵件。

創(chuàng)建 HTML 電子郵件需要將許多的 table在每個客戶端上進(jìn)行精準(zhǔn)地渲染。想要編寫電子郵件，你可能要回溯到幾年以前，就像是回到1999 年編寫 HTML 一樣。

在多終端下成功地渲染郵件并不是一件簡單的事。在我們使用 React來完成設(shè)計(jì)的過程中，可能會碰到若干挑戰(zhàn)，不過這些挑戰(zhàn)與是否使用React 無關(guān)。

用 React 為電子郵件渲染 HTML 的核心是React.renderToStaticMarkup。這個函數(shù)返回了一個包含了完整組件樹的HTML 字符串，指定了最外層的組件。React.renderToStaticMarkup 和React.renderToString 之間唯一的區(qū)別就是前者不會創(chuàng)建額外的 DOM屬性，比如 React 用于在客戶端索引 DOM 的 data-react-id屬性。因?yàn)殡娮余]件客戶端并不在瀏覽器中運(yùn)行——我們也就不需要那些屬性了。

使用 React 創(chuàng)建一個電子郵件，下圖中的設(shè)計(jì)應(yīng)該分別應(yīng)用于 PC 端和移動端：

為了渲染出電子郵件，我寫了一小段腳本，輸出用于發(fā)送電子郵件的 HTML 結(jié)構(gòu)：

// render_email.js 
var React = require('react'); 
var SurveyEmail = require('survey_email'); 
var survey = {}; 
console.log( 
  React.renderToStaticMarkup(<SurveyEmail survey={survey}/>) 
); 

我們看一下 SurveyEmail 的核心結(jié)構(gòu)。首先，創(chuàng)建一個 Email 組件：

var Email = React.createClass({ 
  render: function () { 
    return ( 
      <html> 
        <body> 
          {this.prop.children} 
        </body> 
      </html> 
    ); 
  } 
}); 

<SurveyEmail/>組件中嵌套了<Email/>。

var SurveyEmail = React.createClass({ 
  propTypes: { 
    survey: React.PropTypes.object.isRequired 
  }, 
  render: function () { 
    var survey = this.props.survey; 
    return ( 
      <Email> 
        <h2>{survey.title}</h2> 
      </Email> 
    ); 
  } 
}); 

接下來，按照給定的兩種設(shè)計(jì)分別渲染出這兩個KPI，在 PC 端上左右相鄰排版，在移動設(shè)備中上下堆放排版。每一個 KPI在結(jié)構(gòu)上相似，所以他們可以共享同一個組件：

var SurveyEmail = React.createClass({ 
  render: function () { 
    return ( 
      <table className='kpi'> 
        <tr> 
          <td>{this.props.kpi}</td> 
        </tr> 
        <tr> 
          <td>{this.props.label}</td> 
        </tr> 
      </table> 
    ); 
  } 
}); 

把它們添加到 <SurveryEmail/>組件中：

var SurveyEmail = React.createClass({ 
  propTypes: { 
    survey: React.PropTypes.object.isRequired 
  }, 
  render: function () { 
    var survey = this.props.survey; 
    var completions = survey.activity.reduce(function (memo,ac){ 
      return memo + a; 
    }, 0); 
    var daysRunning = survey.activity.length; 
    return ( 
      <Email> 
        <h2>{survey.title}</h2> 
        <KPI kpi={completions} label='Completions'/> 
        <KPI kpi={daysRunning} label='Days running'/> 
      </Email> 
    ); 
  } 
}); 

這里實(shí)現(xiàn)了將 KPI上下堆放的排版，但是在 PC 端我們的設(shè)計(jì)是左右相鄰排版。現(xiàn)在的挑戰(zhàn)是，讓它既能在 PC 又能在移動設(shè)備上工作。首先我們應(yīng)解決下面幾個問題。

通過添加 CSS 文件的方式美化 <Email/>：

var fs = require('fs'); 
var Email = React.createClass({ 
  propTypes: { 
    responsiveCSSFile: React.PropTypes.string 
  }, 
  render: function () { 
    var responsiveCSSFile = this.props.responsiveCSSFile; 
    var styles; 
      if (responsiveCSSFile) { 
        styles = <style>{fs.readFileSync(responsiveCSSFile)}</style>; 
      } 
      return ( 
        <html> 
          <body> 
            {styles} 
            {this.prop.children} 
          </body> 
        </html> 
      ); 
  } 
}); 

完成后的 <SurveyEmail/> 如下：

var SurveyEmail = React.createClass({ 
  propTypes: { 
    survey: React.PropTypes.object.isRequired 
  }, 
  render: function () { 
    var survey = this.props.survey; 
    var completions = survey.activity.reduce(function (memo, ac) { 
      return memo + a; 
    }, 0); 
    var daysRunning = survey.activity.length; 
    return ( 
      <Email responsiveCSS='path/to/mobile.css'> 
        <h2>{survey.title}</h2> 
        <table className='for-desktop'> 
          <tr> 
            <td> 
              <KPI kpi={completions} label='Completions'/> 
            </td> 
            <td> 
              <KPI kpi={daysRunning} label='Days running'/> 
            </td> 
          </tr> 
        </table> 
        <div className='for-mobile'> 
          <KPI kpi={completions} label='Completions'/> 
          <KPI kpi={daysRunning} label='Days running'/> 
        </div> 
      </Email> 
    ); 
  } 
}); 

我們把電子郵件按照 PC 端和移動端進(jìn)行了分組。不幸的是，在電子郵件中我們無法使用float: left，因?yàn)榇蠖鄶?shù)的瀏覽器并不支持它。還有 HTML標(biāo)簽中的 align 和 valign 屬性已經(jīng)被廢棄，因而 React也不支持這些屬性。不過，他們已經(jīng)提供了一個類似的實(shí)現(xiàn)可用于浮動兩個div。而事實(shí)上，我們使用了兩個分組，通過響應(yīng)式的樣式表，依據(jù)屏幕尺寸的大小來控制顯示或隱藏。

盡管我們使用了表格，但有一點(diǎn)很明確，使用 React渲染電子郵件和編寫瀏覽器端的響應(yīng)式 UI有著同樣的優(yōu)勢：組件的重用性、可組合性以及可測試性。

繪圖

在我們的 Survey Builder示例應(yīng)用中，我們想要繪制出在公共關(guān)系活動日當(dāng)天，某次調(diào)查的完成數(shù)量的圖表。我們想把完成數(shù)量在我們的調(diào)查表中表現(xiàn)成一個簡單的走勢圖，一眼就可以看出調(diào)查的完成情況。

React 支持 SVG 標(biāo)簽，因而制作簡單的 SVG 就變得很容易。

為了渲染出走勢圖，我們還需要一個帶有一組指令的<Path/>。

完成后的示例如下：

var Sparkline = React.createClass({ 
  propTypes: { 
    points: React.PropTypes.arrayOf(React.PropTypes.number).isRequired 
  }, 
  render: function () { 
    var width = 200; 
    var height = 20; 
    var path = this.generatePath(width, height, this.props.points); 
    return ( 
      <svg width={width} height={height}> 
        <path d={path} stroke='#7ED321' strokeWidth='2' fill='none'/> 
      </svg> 
    ); 
  }, 
  generatePath: function (width, height, points){ 
    var maxHeight = arrMax(points); 
    var maxWidth = points.length; 
    return points.map(function (p, i) { 
      var xPct = i / maxWidth * 100; 
      var x = (width / 100) * xPct; 
      var yPct = 100 - (p / maxHeight * 100); 
      var y = (height / 100) * yPct; 
      if (i === 0) { 
        return 'M0,' + y; 
      } else { 
        return 'L' + x + ',' + y; 
      } 
    }).join(' '); 
  } 
}); 

上面的 Sparkline 組件需要一組表示坐標(biāo)的數(shù)字。然后，使用 path創(chuàng)建一個簡單的 SVG。

有趣的部分是，在 generatePath函數(shù)中計(jì)算每個坐標(biāo)應(yīng)該在哪里渲染并返回一個 SVG 路徑的描述。

它返回了一個像“M0,30 L10,20 L20,50”一樣的字符串。 SVG路徑將它翻譯為繪制指令。指令間通過空格分開。“M0,30”意味著將指針移動到x0 和 y30。同理，“L10,20”意味著從當(dāng)前指針位置畫一條指向 x10 和 y20的線，以此類推。

以同樣的方式為大型的圖表編寫 scale 函數(shù)可能有一點(diǎn)枯燥。但是，如果使用 D3這樣的類庫編寫就會變得非常簡單，并且 D3 提供的 scale函數(shù)可用于取代手動地創(chuàng)建路徑，就像這樣：

var Sparkline = React.createClass({ 
  propTypes: { 
    points: React.PropTypes.arrayOf(React.PropTypes.number).isRequired 
  }, 
  render: function () { 
    var width = 200; 
    var height = 20; 
    var points = this.props.points.map(function (p, i) { 
      return { y: p, x: i }; 
    }); 
    var xScale = d3.scale.linear() 
      .domain([0, points.length]) 
      .range([0, width]); 
    var yScale = d3.scale.linear() 
      .domain([0, arrMax(this.props.points)]) 
      .range([height, 0]); 
    var line = d3.svg.line() 
      .x(function (d) { return xScale(d.x) }) 
      .y(function (d) { return yScale(d.y) }) 
      .interpolate('linear'); 
    return ( 
      <svg width={width} height={height}> 
        <path d={line(points)} stroke='#7ED321' strokeWidth='2' fill='none'/> 
      </svg> 
    ); 
  } 
}); 

總結(jié)

在這一章里我們學(xué)到了：

1. React 不只局限于瀏覽器，還可被用于創(chuàng)建桌面應(yīng)用以及電子郵件。
2. React 如何輔助游戲開發(fā)。
3. 使用 React 創(chuàng)建圖表是一個非常可行的方式，配合 D3這樣的類庫會表現(xiàn)得更出色。