写点什么

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

  • 2015-02-14
  • 本文字数:1674 字

    阅读完需:约 5 分钟

上周在加利福尼亚州的门洛帕克(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 和原生服务的通讯是通过批处理的、异步的消息协议完成(主要是 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 )关注我们,并与我们的编辑和其他读者朋友交流。

2015-02-14 08:078886

评论

发布
暂无评论
发现更多内容

让我们与内心聊聊,寻找一段思考发展之路。

叶小鍵

如果生命的长度可以被改写「幻想短篇 27/28」

道伟

28天写作

区块链终将彻底改变医疗行业,但哪些因素制约当前的采用?

CECBC

区块链

如何快速上手 angular.js

华为云开发者联盟

html Vue 数据 angular js

民进昆明市委:建议利用区块链技术优势在昆明打造金融应用平台

CECBC

金融 金融区块链

速看!教育上云 让学习战“疫”两不误

教育云

为您收录的操作系统系列 - 进程管理(中篇)

鲁米

操作系统 进程 同步

Spark Shuffle 内部机制(一)

hanke

大数据 spark 开源

短信验证码被刷怎么办?java 短信验证码防刷策略分析

香芋味的猫丶

黑客 短信防刷 短信验证码 短信防轰炸 短信防火墙

区块链+电力,又擦出什么新火花?

CECBC

区块链

互助系统软件开发,互助app开发

luluhulian

你会在车里唱K吗? (28天写作 Day27/28)

mtfelix

28天写作 智能汽车 MaaS 出行方案

Elasticsearch Bulk API 奇特的 JSON 格式

escray

七日更 28天写作 死磕Elasticsearch 60天通过Elastic认证考试 2月春节不断更

Kafka架构介绍

架构精进之路

kafka 七日更 28天写作 2月春节不断更

5步教你将MRS数据导入DWS

华为云开发者联盟

数据 MRS GaussDB 集群 DWS

【JS】异常处理

德育处主任

JavaScript 大前端 js 28天写作 2月春节不断更

统一数据管理工具——CloudQuery v1.3.3 上线!

BinTools图尔兹

数据库 运维 开发工具 dba 数据库管理工具

一个合格的初级前端工程师需要掌握的模块笔记

我是哪吒

程序员 面试 Vue 大前端 2月春节不断更

信任从对自己诚实开始

Justin

心理学 信任 28天写作

程序员成长第三篇:好的代码和好的工程师

石云升

28天写作 2月春节不断更 工程师等级

口碑销量双爆的数据分析丛书再添新成员!

博文视点Broadview

探索语言交互技术在政务数字化的应用

华为云开发者联盟

语音 政务 语言交互 VUI G2c

RocketMQ-Spring 毕业两周年,为什么能成为 Spring 生态中最受欢迎的 messaging 实现?

阿里巴巴云原生

Docker 容器 微服务 云原生 API

Spring Boot Admin 集成诊断利器 Arthas 实践

阿里巴巴云原生

Java Docker 容器 云原生 Arthas

“新内容 新交互” 阿里云全球视频云创新挑战赛正式开启!

阿里云CloudImagine

阿里云 音视频 应用

人员培养,不是捷径的捷径(下)

一笑

管理 人才培养 28天写作

面试官:请讲一下Redis主从复制的功能及实现原理

华为云开发者联盟

redis 数据 节点 redis哨兵 主从复制

Elasticsearch+Fluentd+Kafka搭建日志系统

远鹏

kafka ELK EFK Fluentd 日志系统

2021年 区块链最火的app爱打卡

v16629866266

Kubernetes安装篇(下):基于Kubeadm方式的集群部署

xcbeyond

Kubernetes kubeadm 部署 28天写作 Kubernetes从入门到精通

GrowingIO SaaS 产品 CI/CD 实践 (一)

GrowingIO技术专栏

ci SaaS CD

Facebook宣布React Native: 开始用JavaScript开发移动原生应用_JavaScript_Matt McComb_InfoQ精选文章