转载

Facebook宣布React Native: 开始用JavaScript开发移动原生应用

上周在加利福尼亚州的门洛帕克（Menlo Park）举行的 React开发者大会上，Facebook 宣布了React Native - 这是 React 这个非常流行的JavaScript类库的纯移动端版本。从表面上看，React Native很像React，通过JavaScript声明语法来定义互动的用户界面。不过在这背后两者有很大不同，React Native展现界面是通过特定于平台的原生控件，而React则是用DOM元素。

React是用于开发前端用户界面的一套JavaScript框架，起初是由Facebook开发，随后实现了开源。React使用声明式的语法和 JSX （他们的JavaScript语法扩展）来描述HTML布局。每个React组件由属性（property）和状态（state）来配置，当状态发生变化时，会触发由单向数据流驱动的UI更新。这些更新通过虚拟DOM 机制进行优化，确保了实际的DOM更新只包括真正产生了状态变化的部分。

一个典型的React组件如下所示：

var HelloMessage = React.createClass({   render: function() {     return <div>Hello {this.props.name}</div>;   } }); React.render(<HelloMessage name="John" />, mountNode);

上面的例子中定义了一个名为HelloMessage的React自定义组件。正如React的标准做法一样，该组织中定义了render方法返回一个HTML元素的树结构，以生成DOM。这种以HTML语法风格来定义元素是由JSX支持的，这些语句会被预处理并翻译成React函数调用来实际产生相关HTML元素。

类似的，React Native使用相同的声明式语法来定义原生UI，只不过不是绑定到HTML元素，而是通过自定义类型实现对原生UI组件的映射。下面是来自 ChecklistApp 的示例代码，展现了React Native如何绑定到原生UI组件，比如View和可编辑文本框：

render() {  return (   <View style={{marginTop: 20}}>      <Text>Checklist</Text>      <TextInput       style={styles.input}       autoFocus={true}       onSubmitEditing={this.handleSubmit}    />      <View style={styles.list}>      {this.renderItems()}      </View>     </View>  ); }

在周三（1月28日）宣布React Native之后，Christopher Chedeau（Facebook的软件开发人员）作了一个题为“深入了解React Native”的演讲。在演讲中Christopher指出了React Native比起标准Web开发或原生开发能够带来的三大好处：

手势识别：基于Web技术（HTML5/JavaScript）构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。
原生组件：使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截，而React Native由于采用了原生UI组件自然没有此问题。
样式和布局：iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。

在Hacker News上关于Facebook宣布React Native的讨论中，Peter Hunt（React的代码贡献者）提供了关于React Native的内部机制的说明：

JS引擎运行于后台线程
主线程中运行原生服务（objc或者android），JS和原生服务的通讯是通过批处理的、异步的消息协议完成（主要是create view()、 update view(),、destroy view(),、on event()等等）
React插件遵循这种通讯协议
通过工具使得跨平台开发更容易一些（比如标准文本组件，跨平台的flexbox布局系统）
设计目标就是充分利用原生平台的UI组件，并不是成为下一个Java Swing

Facebook并没有宣布React Native何时面向公众发布，目前仍然处于公司内部开发状态。不过整个库的功能已经可用，并且已经用在Facebook的一些已发布应用中，比如 Facebook Groups iOS App 。

查看英文原文： Facebook Enables Native App Development in JavaScript with React Native

感谢邵思华对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。

正文到此结束