BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Matt McComb 关注 0 他的粉丝 ,译者 王沛 关注 9 他的粉丝 发布于 2015年2月15日. 估计阅读时间: 6 分钟 | GMTC大前端的下一站,PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。

上周在加利福尼亚州的门洛帕克(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开发或原生开发能够带来的三大好处:

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

在Hacker News上关于Facebook宣布React Native的讨论中,Peter Hunt(React的代码贡献者)提供了关于React Native的内部机制的说明:

  • JS引擎运行于后台线程
  • 主线程中运行原生服务(objc或者android),JS和原生服务的通讯是通过批处理的、异步的消息协议完成(主要是createview()、 updateview(),、destroyview(),、onevent()等等)
  • 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)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

React Native 官方文档的完整中文翻译教程 by 4J Vincent

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native,结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。

下面是对 React Native 官方文档的完整中文翻译教程:wiki.jikexueyuan.com/project/react-native/

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

1 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT