使用React Native的第一印象

15-02-07 banq

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应用：

实现代码也很简单，试图渲染部分：

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">

lostalien

2015-02-09 15:36

很期待这个技术