使用React Native的第一印象

banq發表於2015-02-07
React Native
Facebook提供了一種編寫原生移動應用的效果的框架，稱為：React Native，你可以使用Javascript編寫可媲美原生iOS或安卓元件的效果。

James Long在過去幾個月研究學習了Ember, Angular, 和 React，得到了很多Web元件的思想，這些框架都是以不同方式解決類似的問題，有些是衝突，有些是可和諧相處的。

James Long主要關心資料繫結和元件化componentizing UI，在研究了上面這些技術框架後，他認為React提供了最好的解決方案。

James Long在First Impressions using React Native一文中描述瞭如何使用React Native在瀏覽器實現3D等原生應用程式才能開發的效果。

React Native還沒有完全開源，Facebbook正在進行清理程式碼等準備工作，他們應該會更快地開源。

關於跨平臺原生應用目前主要由JavaScript. Titanium, PhoneGap驅動，這些專案都有一個短處，要麼你將Web應用包裝在一個Web瀏覽器中，要麼他們試圖模仿HTML/CSS，然後，你換可以直接和原生物件互動，但是這容易造成很大效能問題，React Natice實際在單獨執行緒實現佈局layout，這樣主執行緒是自由的，能夠聚焦一些平滑的動畫等。

React Native使用JavaScriptCore 在iOS中執行Javascript，最重要部分是它以單獨執行緒執行Javascript(Titanium也是這麼做)，你能使用Javascript編寫元件，就像你在使用React.js一樣，除了不使用div和a，而是使用View和Text，你能得到React所有構建UI的組合優點。

React Native會獲取你的UI然後傳送少量的資料到主執行緒，使用原生元件來渲染介面，View是一個UIView，最精彩的是你不必關心更新UI，你只要基於一些狀態宣告渲染即可，React會使用不同演算法計算你的改變和實際介面之間的差別，然後只傳送這種差別資料到實際介面進行渲染。(注：這是React.js最核心的一部分，體現效果是速度效能快)

編寫原生UI從來都不是很容易，而使用JS編寫動畫不會有效能問題，因為JS執行在單獨執行緒。

該文展示了一個使用React Native編寫的OpenGL 3D應用：

使用React Native的第一印象

實現程式碼也很簡單，試圖渲染部分：

var ObjList = React.createClass({
  // a few methods clipped....

  selectModel: function(file) {
//呼叫Objective-C方法
    controller.loadMesh(file);
  },

  renderRow: function(file) {
    return View(
      null,
      TouchableHighlight(
        { onPress: () => this.selectModel(file),
          underlayColor: 'rgba(0, 0, 0, .6)' },
        Text({ style: { height: 30, color: 'white' }}, file)
      )
    );
  },

  render: function() {
    var source = this.getDataSource(this.props.files);

    return ListView({
      style: { flex: 1 },
      renderRow: this.renderRow,
      dataSource: source
    });
  }
});
<p class="indent">



相關文章