Native的使用热公布实践,Native品质之谜

React Native 品质之谜

2017/04/14 · JavaScript
· React Native

本文小编: 伯乐在线 –
ThoughtWorks
。未经小编许可,禁止转载!
迎接参与伯乐在线 专辑作者。

在 PhoneGap、RubyMotion、Xamarin、Ionic 一众跨平台开发工具中,React
Native可以杀出一条血路,得到如今那样大的影响力,除了React社区生态圈的加持和脸谱的大力推广以外,此外一个最要紧的因由就是其在支付效用和利用品质方面获取了一个比较好的平衡:

  • 付出效用因此JS工程实践,逻辑跨平台复用获得大幅度提高
  • 属性则经过全Native的UI层得到满足

但是,虽说框架提供了这么些平衡能力,平衡点的挑选却控制在开发者手中,本文将从React
Native的习性角度来看看应该怎么支配这一个平衡点。

在PhoneGap、RubyMotion、Xamarin、Ionic一众跨平台开发工具中,React
Native可以杀出一条血路,获得近日如此大的影响力,除了React社区生态圈的加持和Facebook的大力推广以外,别的一个最器重的因由就是其在付出功用和使用质量方面得到了一个比较好的平衡:

亚洲必赢官网 1

1 热发布

网页宣布 VS APP公布

网页发表:服务端上线新的网页代码,用户端通过链接直接访问。

APP发表:�揭橥新的包裹包(应用市场:上传新的包装包;应用内升任:服务端公布新的卷入包),用户端下载,安装。

网页公布属于热发表,完全�受控于服务端

APP发布的范围:
接纳市场查处
用户端下载,安装

APP热公布的目标是落到实处类似于网页的公布办法,排除�更新对于利用市场和用户的依靠,完全由服务端控制。

React Native的做事规律

在React
Native的接纳中,存在着五个例外的技术王国:JS王国和Native王国。应用在启动时会先进行双向注册,搭好桥,让五个王国知道互相的存在,以及定义好互相合作的艺术:

亚洲必赢官网 2

(图片来自: )

然后,在使用的实际运作进度中,八个技术王国通过搭好的桥,相互合营已毕用户成效:

亚洲必赢官网 3

(图片来源于:http://www.jianshu.com/p/978c4bd3a759)

为此,React
Native的本来面目是在两个技术王国之间搭建双向桥梁,让他俩得以相互调用和响应。那么就可以把上图简化一下:

亚洲必赢官网 4

  • 支出功效因而JS工程执行,逻辑跨平台复用获得极大升高
  • 特性则通过全Native的UI层得到满足

ReactNative的文档地址有五个,如若您英文够好,就去研读官方的文档吧,
如果读原文比较费力,中文官网也是不易的选择。

2 APP热宣布的艺术

React Native的质量瓶颈

通过地点的分析,大家就足以把一个React
Native应用分成多个部分:Native王国、Bridge、JS王国。当使用运行时,Native王国和JS王国个别运行在团结单身的线程中:

Native王国:

  • 运作在主线程上(可能会有些独立的后台线程处理运算,当前议论中可忽略)
  • iOS平台上运行Object-C/Swift代码,Android平台上运行Java/Kotlin代码
  • 顶住处理UI的渲染,事件响应。

JS王国:

  • 运行在JS引擎的JS线程上
  • 运行JS代码
  • 承担处理工作逻辑,还包含了应当彰显哪个界面,以及怎么样给页面加样式。

在Native王国中,经过谷歌、苹果公司连年的优化调整,Native代码可以丰盛疾速的周转在设施上。在JS王国中,JS代码作为脚本语言,也可以很快捷的运行在JS引擎上,那两边独立来看都不会有性能问题。品质的瓶颈只会师世在从一个帝国转入另一个帝国时,更加是几度的在四个王国之间切换时,多个王国之间不可以直接通讯,只可以通过Bridge做系列化和反种类化,查找模块,调用模块等各类逻辑,最终影响到应用上,就是UI层用户可感知的卡顿。
因而,对React
Native的性质控制就器重集中在哪些尽量缩小Bridge必要处理的逻辑上。

那么,什么情状下会须求Bridge处理逻辑吗?

  1. UI事件响应
    所有的UI事件都发生在Native侧,会以事件的款型传递到JS侧。这么些历程十分不难,也不会波及大气的数据转移。在React
    Native应用中,业务逻辑,应用状态,数据都在JS侧,所以UI事件只是一个触发器,不会有品质难点。
  2. UI更新:前边已经说过JS负责控制应该突显哪个界面,以及如何样式化界面,因而UI更新的发起方是JS侧,更新时会向Native侧同步多量的UI结构和数码,那类更新平日出现品质难题,尤其是在界面复杂、变动数据大,或者做动画、变动频仍时。
  3. UI事件响应和UI更新同时出现:在UI更新时,结构变迁不大,则质量难题不大;可是只要那时候又有UI事件触发JS侧逻辑处理,而该逻辑处理又相比较复杂,耗时较长,导致JS侧没有时间片处理与Native侧数据同步时,也会发出品质难点。

然而,虽说框架提供了那么些平衡能力,平衡点的取舍却控制在开发者手中,本文将从React
Native的属性角度来看看应该怎么着支配那几个平衡点。

下边是自身个人记录的局地笔记,仅供初学者入门参考

2.1 H5热发布

效果完全由H5达成,APP使用WebView来加载。

优势:完全热公布

劣势

  • 品质-H5的性质相比较Native差得相比较多,交互体验较差。
  • 缓存-H5的缓存受制于系统WebView,在无网或缓存过期意况下不可能表现界面。

React Native的习性优化措施

面前早已表达了React Native的质量瓶颈会在哪些地方,React
Native官方也知晓这一个,其在React
Native中提供了有些特性优化措施支持开发者克服那个质量难题:

  1. 框架自带的React基于Virtual
    Dom的Diff算法有限支撑了UI变动时传递的只是变化的UI部分,尽量收缩须要联合的多寡。
  2. 通过Direct
    Manipulation的方法直接在尾部更新了Native组件的属性,从而避免渲染组件结构和协同太多视图变化所牵动的大方支付。那样确实会带来一定的性质升高,同时也会使代码逻辑难以清理,而且并没有缓解从JS侧到Native侧的数目同步费用难题。由此那几个艺术官方都不再推荐,更推荐的做法是合情选取setState()和shouldComponentUpdate()方法解决那类难题。
  3. 在遇见动画质量难点时,可以动用Annimated类的库,三回性把什么变迁的扬言发送到Native侧,Native侧根据接收到的扬言自己担负接下去的UI更新。不要求每帧的UI变化都共同一遍数据。
  4. Native和JS混编,把会大批量转变的零部件做成Native组件,那样UI的更改数据直接在Native侧自己处理了,无需通过Bridge,而不变的中间组件因为没有数量更新需求联合,所以也不会采纳到Bridge。框架提供的NavigatorIOS绝对于Navigator的性质升高就是那种做法。
  5. 相遇事件响应和UI更新同时发生导致的性质难点时,能够利用Interaction
    Manager把那个耗时较长的行事安排到具备互动或动画达成之后再举行。

React Native的工作规律

在React
Native的利用中,存在着四个不等的技巧王国:JS王国和Native王国。应用在启动时会先举办双向注册,搭好桥,让八个王国知道互相的存在,以及定义好相互同盟的法子:

(图片来源:https://tadeuzagallo.com/blog/react-native-bridge/

下一场,在利用的其实运作进度中,五个技巧王国通过搭好的桥,相互同盟达成用户功用:

(图片来自:http://www.jianshu.com/p/978c4bd3a759)

因而,React
Native的五指山真面目是在八个技巧王国之间搭建双向桥梁,让他俩可以并行调用和响应。那么就足以把上图简化一下:

预科

入门React Native前需求精晓一下学问,那样能援救您更快的了然RN
Node:Node.js
教程
ReactJS:《React
入门实例教程》
ES6:《ECMAScript 6
入门》

2.2 数据热公布

多少由服务端控制,动态宣布,APP按照数据来显示UI,完成UI有限的动态性(UI动态帮衬先行在APP中定义好)。

Native的使用热公布实践,Native品质之谜。此间的数码也包含剧本数据的情事,APP通过脚本引擎执行脚本,根据结果来进行相应逻辑。

优势:数据层面热公布

劣势:无法落实UI和逻辑的一点一滴热发布

追逐品质和频率平衡的覆辙

在明白了React
Native的质量瓶颈和优化措施将来,就可以大体计算一个探寻React
Native开发功效和特性平衡点的老路:

第一步: 全JS已毕, 从一伊始在技能选型上用React
Native就是为着确保支付的频率,在未曾相会品质难题以前,最大化效用是协会的一律追求。

第二步: 从JS侧进行品质优化

  • 对于这一个显明会涉嫌Bridge、需大批量处理逻辑的场景,比方说动画,复杂的手势操作响应等,尝试利用经过优化过的库(比方说:Animated),三次传递动画或者数额总体数据的讲述给Native,Native侧自己会鲁人持竿申明执行下去。
  • 接纳InteractionManager把耗时操作递延到UI响应之后,处理那些存在因为耗时的JS操作导致的UI响应质量难题。

第三步:在真机上实测,检查品质难题点。不要过早优化,找到问题点再一一甩卖。

第四步:若果经过JS端的优化策略之后,在装置上或者有性能难点,可以把有难点的一部分以Native格局落成,那也是为什么要推荐React
Native团队中有10%左右的Native
Developer。在那几个手续中,需要注意问题的割裂措施,如若一个场地:在运动一个Container时,Container的UI同时暴发变化,不过Container内部的始末并从未爆发变化,那种状态下,只须要用Native落成Container,Container内部的机件依然以JS完结。

1 赞 收藏
评论

React Native的属性瓶颈

由此地点的解析,我们就足以把一个React
Native应用分成八个部分:Native王国、Bridge、JS王国。当使用运行时,Native王国和JS王国个别运行在投机独立的线程中:

Native王国:

  • 运作在主线程上(可能会有些独立的后台线程处理运算,当前研究中可忽略)
  • iOS平台上运行Object-C/Swift代码,Android平台上运行Java/Kotlin代码
  • 担负处理UI的渲染,事件响应。

JS王国:

  • 运行在JS引擎的JS线程上
  • 运行JS代码
  • 承担处监护人情逻辑,还包蕴了应有显得哪个界面,以及如何给页面加样式。

在Native王国中,经过Google、苹果公司连年的优化调整,Native代码可以足够神速的运行在配备上。在JS王国中,JS代码作为脚本语言,也可以很便捷的周转在JS引擎上,那两边独立来看都不会有品质问题。质量的瓶颈只会并发在从一个帝国转入另一个帝国时,尤其是反复的在三个王国之间切换时,三个王国之间不能一向通讯,只可以通过Bridge做系列化和反系列化,查找模块,调用模块等各样逻辑,最终影响到应用上,就是UI层用户可感知的卡顿。
由此,对React
Native的特性控制就至关紧要汇集在如何尽量裁减Bridge必要处理的逻辑上。

那就是说,什么状态下会须求Bridge处理逻辑吗?

  1. UI事件响应
    所有的UI事件都发出在Native侧,会以事件的样式传递到JS侧。那个进程卓殊简单,也不会波及大气的数额转移。在React
    Native应用中,业务逻辑,应用状态,数据都在JS侧,所以UI事件只是一个触发器,不会有品质难题。
  2. UI更新:后边已经说过JS负责控制应该显示哪个界面,以及怎样样式化界面,由此UI更新的发起方是JS侧,更新时会向Native侧同步大量的UI结构和数目,这类更新常常出现质量难题,越发是在界面复杂、变动数据大,或者做动画、变动频繁时。
  3. UI事件响应和UI更新同时出现:在UI更新时,结构变迁不大,则品质难点不大;不过若是那时候又有UI事件触发JS侧逻辑处理,而该逻辑处理又比较复杂,耗时较长,导致JS侧没有时间片处理与Native侧数据同步时,也会时有发生质量难题。

环境

2.3 插件化热揭橥

APP的单身作用作为插件,动态下载,动态运行,插件发表由服务端动态控制。

优势:作用�性热发表

劣势:使用非系统公开API,有失效危害

至于作者:ThoughtWorks

亚洲必赢官网 5

ThoughtWorks是一家中外IT咨询公司,追求卓越软件质量,致力于科学和技术驱动商业变革。擅长营造定制化软件出品,协理客户高效将概念转化为价值。同时为客户提供用户体验设计、技术战略咨询、社团转型等咨询服务。

个人主页 ·
我的稿子 ·
84 ·
  

亚洲必赢官网 6

React Native的品质优化措施

前面已经表达了React Native的特性瓶颈会在什么样地点,React
Native官方也知晓这么些,其在React
Native中提供了一些属性优化措施扶助开发者克制这一个质量难点:

  1. 框架自带的React基于Virtual
    Dom的Diff算法保险了UI变动时传递的只是变化的UI部分,尽量裁减须要共同的数据。
  2. 通过Direct
    Manipulation的方法直接在底部更新了Native组件的习性,从而避免渲染组件结构和协办太多视图变化所拉动的大度付出。那样真的会带来一定的品质提升,同时也会使代码逻辑难以清理,而且并不曾缓解从JS侧到Native侧的数额同步费用难点。由此这些主意官方都不再推荐,更推荐的做法是客观运用setState()和shouldComponentUpdate()方法解决那类难点。
  3. 在碰到动画品质难题时,可以运用Annimated类的库,一遍性把哪些转变的宣示发送到Native侧,Native侧依照接收到的扬言自己肩负接下去的UI更新。不须要每帧的UI变化都一头五次数据。
  4. Native和JS混编,把会大方变动的零件做成Native组件,那样UI的转移数据直接在Native侧自己处理了,无需通过Bridge,而不变的内部组件因为从没数据更新需求共同,所以也不会动用到Bridge。框架提供的NavigatorIOS相对于Navigator的品质升高就是那种做法。
  5. 赶上事件响应和UI更新同时发出导致的质量难点时,可以选拔Interaction
    Manager把那一个耗时较长的劳作安顿到持有互动或动画落成之后再开展。

系统环境要求

IOS : MacOS, 黑苹果
Android :MacOS, Linux, Windows

2.4 React Native

还有一种思路,APP作为基础容器,应用效益作为脚本文件,动态下发,�通过分析引擎动态执行,展现为Native
UI,同时控制数据和事情逻辑。

剧本文件公布由服务端动态控制,可以落成成套APP或者局地机能完全热发布。

React
Native是facebook开源的营造跨平台利用的框架,它的法则是,通过JavascriptCore引擎,解析JSX(类似XML的Javascript增添语言)脚本代码,生成Virtual
DOM,再更换为Native视图,同时通过桥接JS和Native,已毕事件交互。

React Native通过Virtual
DOM,以diff的主意交给Native渲染,�其diff算法卓越急速,可以有限支撑突出的Native品质。那是它优于H5的地点。

优势:

  • 全盘热发表
  • 良好的Native性能
  • 跨平台复用:Andriod, iOS, H5。
  • 大厂出品:持续维护性(两礼拜七个release版本);开放性,三方开源库援救。

劣势:

  • 成熟度不够。
  • 脚下支撑Android4.1和iOS7.0上述系统版本。

对动态性须求较高的APP,React
Native提供了一种缓解方案,完成类似网页的发表功用,同时保障出色的Native质量

使用React Native的APP:
Facebook,QQ,QQ音乐,QQ空间(发现Tab)

除此以外,Weex是阿里开源的运动端跨平台支付框架,原理与React
Native类似,只不过它的脚本语言换成了Vue(也是JS框架)。

追求品质和频率平衡的老路

在询问了React
Native的属性瓶颈和优化措施将来,就可以大概总括一个探寻React
Native开发成效和性质平衡点的套路:

第一步: 全JS完毕, 从一伊始在技术选型上用React
Native就是为着有限支撑支付的频率,在没有遭逢质量难点此前,最大化效用是团队的等同追求。

第二步: 从JS侧举办品质优化

  • 对于那么些显明会波及Bridge、需大批量甩卖逻辑的气象,比方说动画,复杂的手势操作响应等,尝试利用经过优化过的库(比方说:Animated),一遍传递动画或者数额总体数据的叙说给Native,Native侧自己会依据申明执行下去。
  • 行使InteractionManager把耗时操作递延到UI响应之后,处理那个存在因为耗时的JS操作造成的UI响应品质难题。

第三步:在真机上实测,检查品质难题点。不要过早优化,找到难点点再一一拍卖。

第四步:一经经过JS端的优化策略之后,在设备上仍然有总体性难点,可以把有难点的片段以Native形式达成,那也是干吗要推荐React
Native团队中有10%左右的Native
Developer。在那些手续中,要求小心难点的隔离措施,假使一个景观:在移动一个Container时,Container的UI同时暴发变化,不过Container内部的情节并不曾暴发变化,那种情状下,只需求用Native落成Container,Container内部的组件照旧以JS落成。

配置

所有的技艺学习都应有从环境搭建开端,那里也没怎么好统计的,最好的措施就是随即官网指引陈设环境
若是您是node的行家里手,那就平昔入手安装以下条件呢:

  • node
  • npm
  • react-native-cli
  • Xcode
    安装Xcode IDE和Xcode的命令行工具(IOS开发依赖)
  • Android Studio
    下载必须的插件:
    a) JDK1.8+
    b) Show Package Details
    c) Android SDK Build Tools (指定23.0.1版本)
    d) Android Support Repository
    安顿基础环境:
    a) ANDROID_HOME
    (如运行是遇上标题可参考此文http://www.jianshu.com/p/a77396301b22)
    b) JAVA_HOME

3 React Native原理

测试

react-native init RNDemo
cd RNDemo
react-native run-ios

比方你的虚拟机启动了,那么恭喜您,你的条件已经配备成功!
若果运行报错,可以作品最终找寻解决方案。

亚洲必赢官网 7

虚拟机启动界面

3.1 React Native集成

React Native(以下简称RN)的合并参考官网:
https://facebook.github.io/react-native/docs/getting-started.html

语法

亚洲必赢官网 ,先是需求明白一些焦点的React的定义,比如JSX语法、组件、state状态以及props属性。
还索要精晓一些React Native特有的文化,比如原生组件的使用。

学科上的事物本身就不多说了,合法文档上有详细的授课

直接从代码上上课新手注意点吗

3.2 RN目录结构

亚洲必赢官网 8

RN工程目录结构

  • *.android.js:Android 的JS文件
  • *.ios.js:iOS的JS文件
  • android:Android的Native工程
  • ios:iOS的Native工程
  • node_modules:RN基于NodeJS的基础库。包罗基本组件,以及包装脚本等等。

Hello World

观念惯例,入门先行,Hello World

你可以新建一个类型,然后用地点的代码覆盖你的index.ios.js或是index.android.js
文件,然后运行看看。

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text } from 'react-native';
class HelloWorldApp extends Component {
  render() {
    return (
      <Text style={styles.red}>Hello world!</Text>
    );
  }
}
const styles = StyleSheet.create({
  red: {
    color: 'red',
    fontWeight: 'bold',
  }
});
// 注意,这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

从语法上看,RN和ReactJS语法分裂不大,都是采取JSX和ES6的方式,假设您对ReactJS和ES6不熟习,指出你先拜读下阮一峰的博文教程:《React
入门实例教程》,《ECMAScript
6 入门》

相较写Web App,分歧在于RN的语法引入了原生的机件

import { AppRegistry, StyleSheet, Text } from 'react-native';

RN中即便选用JS写原生UI,但不再利用正规HTML标签 <div> 或是 `
,而是使用RN的组件
`AppRegistry
模块写在index.ios.js或是index.android.js文件里,用来报告React
Native哪一个零部件被注册为全部应用的根容器,一般一个使用只运行一遍。

仅仅使用props和基础的View、Text、Image以及TextInput组件,就足以编写各式种种的UI组件了

3.3 RN原理

亚洲必赢官网 9

RN架构

Java层
Java层为利用的进口,启动C++层的JS解析器,执行JS,并由此C++传递的渲染指令,从而创设Native
UI等。宗旨逻辑在ReactCore中落成。在UI层面,ReactCore已毕了对Native视图组件的卷入,它与JS层定义的零部件是各种映射的。

Java层集成众多优质开源库,图片处理利用的是Fresco,互联网通讯使用的是okhttp。JS层的组件会透过这个基础库来落到实处效益,如Image组件使用Fresco来加载远程图片,fetch组件使用okhttp来进行网络请求。

C++层
C++层主要封装了JavaScriptCore(Android和iOS通用的JS引擎),用来达成JS的辨析和实践。基于JavaScriptCore,意味着JS可以动用ES6的新特性,如class、箭头操作符等。

Bridge�落成Java和 JS之间的通讯。

JSLoader用来加载JS文件,包含assets目录和地点文件。

JS层
驷不及舌落成UI布局和事件分发,主要有以下多少个部分:

Component:JS层通JS/JSX编写的Component来打造Virtual DOM,Virtual
DOM是DOM在内存中的一种轻量级表达方式,可以因而分化的渲染引擎生成不一致平台下的UI。Component的留存让计算DOM diff 更快捷,从而使得映射到Native的视图�渲染有很好的属性。

Layout:React使用css-layout,css-layout使用JS达成了flexbox
,能编译成Native代码,最后达到跨平台的显得目标。

Lifecycle&Data:React 组件通过中间的 state
变量支配生命周期及事件回调。如getInitialState方法用于定义组件初步状态,后续组件可通过
state 属性读取该情状。当�调用setState 方法就修改状态值时,RN会自动调用
render 方法,重新渲染组件。

样式

安分守己JSX的语法需要使用了驼峰命名法:

  • font-weight -> fontWeight
  • background-color -> backgroundColor

React
Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点:

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

4 Android的RN集成

Android上,应用是透过Activity来承载的。

复杂应用一般由多少个模块组合,每个模块对应一个Activity。一言以蔽之,大家得以以Activity为模块单元。

事件

事件的登记跟ReactJS没什么不相同

class MyButton extends Component {
  _onPressButton() {
    console.log("You tapped the button!");
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}>
        <Text>Button</Text>
      </TouchableHighlight>
    );
  }
}

此处注册的零部件为TouchableHighlight,具体应用哪类组件,取决于你指望给用户什么样的视觉反馈

  • 诚如的话,你可以使用TouchableHighlight来创制按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
  • 在Android上还足以行使TouchableNativeFeedback,它会在用户手指按下时形成类似墨水涟漪的视觉效果。
  • TouchableOpacity会在用户手指按下时下落按钮的透明度,而不会改变背景的颜料。
  • 若果您想在拍卖点击事件的同时不显示其余视觉反馈,则须求利用TouchableWithoutFeedback

常用的事件有:
点击:onPress
长按:onLongPress
缩放:maximumZoomScale,minimumZoomScale

其余关于Props、State、样式、布局、事件等知识点的详解,法定文档上都有详细的上课,相比基础,那里就不做牵线了

4.1 Activity与bundle

RN通过bundle来承载应用。bundle包罗JS脚本代码及其引用的资源(图片)。
在Android上,我们为各类Activity绑定一个bundle,来达成模块的独自管理。

亚洲必赢官网 10

Activity与bundle.png

在Native中,我们透过BaseReactActivity�来连接RN,它经过JsBundle和Component与Bundle关联起来。

Bundle两种方式,一个是Assets,打包在apk中一头公布;一个File,它是动态更新下载的。在有File时使用File,没有File时利用Assets。

Activity的挂号大家只在Manifest中定义几个Activity模板。例如,

  • SingleTaskActivity:launch mode为SingleTask
  • StandardActivity:launch mode为Standard
  • WebViewActivity:process为独立的web进程

Activity跳转时,指定相应的模板Activity,传递bundle音信即可。

跨平台

‘Learn Once,Write Anywhere’ and not ‘Write Once,Running Anywhere’.

RN并不可能算上是实在的跨平台的言语,即便可以通过包装落成差别平台打包差距组件,然而有些组件须要大家本着分化平台编写差距代码。那就须要大家决不储备一些原生开发的学问。

4.2 JS

JS文件结构(avcdemo.android.js)

import React, {Component} from 'React'; //引入React组件

import {
  AppRegistry,
  View,
  Text,
  Image
} from 'react-native';  //引入RN组件

class AVCDemo extends Component { //定义Component
  render() {  //render定义视图结构
    return(
      <View style={styles.full}>
        <Text style={styles.text}>Hello RN</Text>
        <Image source={require('./res/demo/kaola.png')} style={styles.img}></Image>
      </View>
    )
  }
}

var styles = {  //定义样式
  full: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
  text: {
    fontSize: 80
  },
  img: {
    width: 200,
    height: 200
  }
}

AppRegistry.registerComponent('demo', () => AVCDemo); //注册Component

亚洲必赢官网 11

demo

办事原理

亚洲必赢官网 12

通讯示意图

RN的本质是在多少个模块之间搭建双向桥梁,让他们可以互相调用和响应,简单的示意图为

亚洲必赢官网 13

4.3 Native Activity

DemoActivity

public class DemoActivity extends AppReactActivity {

    @Override
    protected String getMainComponentName() {
        return "demo";
    }

    @Nullable
    @Override
    protected String getBundleAssetName() {
        return "avcdemo.android.bundle";
    }

}

可以看出Activity通过bundle最后绑定到Component。

Native模块

运转在主线程上(可能会有些独立的后台线程处理运算,当前谈论中可忽略)
iOS平台上运行Object-C/斯维夫特代码,Android平台上运行Java/Kotlin代码
担当处理UI的渲染,事件响应。

4.4 Component

Component有多少个基本概念:props,state,render,生命周期。

props:静态属性,提供定制参数给调用方。如Image的source。

state:动态属性,内部使用。当通过setState方法改变时,会调用render方法进行重新渲染。比如,我们获得互联网数据回来时须求转移界面,那时就要求将互连网数据作为一个动态属性,同时render方法中运用�该属性来开展渲染。

render:渲染方法,定义Component的视图结构。

与Activity类似,Component也有生命周期。

亚洲必赢官网 14

Component生命周期.png

JS模块

运行在JS引擎的JS线程上
运行JS代码
担当处管事人务逻辑,还包蕴了相应出示哪个界面,以及怎么着给页面加样式。

4.5 RN组件

下边来看望RN对应用完成的接济。首先是组件。

心想事成利用的组件大致分为4个层面:

  • UI
  • 网络
  • 存储
  • 线程

Bridge模块

Native和JS模块之间不可以一贯通讯,只好通过Bridge做种类化和反体系化,查找模块,调用模块等各个逻辑,最后影响到使用上

4.5.1 UI

UI层面又可以细分为:UI组件,动画,交互事件。

UI组件
RN提供了较为丰硕的基本功零部件,以及部分复杂组件。

亚洲必赢官网 15

RN UI组件

UI组件本质上会做一个到Native组件的投射。

RN UI组件 Android UI组件
View -> ViewGroup
Image -> ImageView
Text -> TextView
TextInput -> EditText
ViewPagerAndroid -> ViewPager
WebView -> WebView
ScrollView -> ScrollView
ListView -> ScrollView

RN的ListView并没有行使Native的ListView,而是依照RN的ScrollView,在js层来处理ListView的逻辑。

动画
RN提供了两种动画形式:Animated和LayoutAnimation。
Animated与Android的习性动画类似,可以兑现透明度,缩放和活动等功能。
LayoutAnimation与Android LayoutAnimation类似,功效于�参预和移除视图树。

互动事件
彼此之间事件主要有三种:点击和Touch,按键。
RN提供Touchablexxx(TouchableOpacity,TouchableHighlight等)系列组件来已毕点击、长按、滑动交互。

onPressIn:点击伊始;
onPressOut:点击截至或者离开;
onPress:单击事件回调;
onLongPress:长按事件回调。

事件拦截(类似于Android的onInterceptTouch伊芙nt)
onStartShouldSetResponder
onMoveShouldSetResponder

按键处理,RN提供了Andorid的back键处理BackAndroid

性能

动用React
Native替代基于WebView的框架,使App刷新可以达标每秒60帧(充裕流畅),并且能有类似原生App的外观和手感,固然RN框架已经提供了这几个平衡的能力,但平衡点的选用却领会在开发者手中,即使是Native也惊惶失措幸免开发格局带来的特性消耗

4.5.2 网络

RN提供fetch
API用于互连网请求,它实质是基于OkHttp完毕。

它扶助GET,POST等中央措施,包罗header的传递,以及响应json格式化。

其余,它也提供XMLHttpRequest和WebSocket的帮衬。

品质影响原因

事情逻辑运行在JS线程上,负责API的调用,事件的拍卖,状态的创新,而事件的响应UI的变更暴发在主线程上,60帧/s的频率需要每一帧的响应处理唯有16.67(1000/60)ms,假设当先了16.67ms就会生出丢帧,若是丢帧领先100ms就会时有暴发明显的卡顿现象。所有下降每一帧运算的损耗才能进步性能。

4.5.3 存储

RN提供了几乎的恒久存储组件AsyncStorage。

它帮衬key-value存储,效果类似于Android的SharedPreference,实际上它是储存在地面的sqlite数据库中。

倘诺急需传统的sqlite存储,必要协调落成。会有一对开源组件供完结参考:https://github.com/jbrodriguez/react-native-android-sqlite。

特性影响切面

UI事件响应: 品质影响小
UI更新:
JS侧会向Native侧同步大量的UI结构和数目,界面复杂、变动数据大,或者做动画、变动频仍,不难出现质量难题。
UI事件响应和UI更新同时出现:
二种事件一经占用了过多的线程,就会促成另一种事件无法及时响应,表现在选拔上就是卡顿

4.5.4 线程

RN的应用逻辑是运行JS线程上的,独立于Android的UI线程。JS线程上的换代批量传递给Native作UI更新。

RN提供Timers来落到实处异步逻辑。
可以透过JS本身的异步接口来已毕(async/await)。

大规模影响属性的点

console,ListView,动画Animated

4.6 RN扩展

RN官方提供的零部件可以满意基本工作供给,倘诺要完成复杂应用,须求举办增添。

脚下不可胜举RN开源组件:https://github.com/jondot/awesome-react-native。

其它,也得以友善定制。定制分为多少个方面:

  • JS调用Native
  • 定制JS层组件
  • 使用Native UI组件

特性优化

透过长年累月的上进和优化,JS和Native能够在各自的模块线程高效便捷的运转,品质的瓶颈主要在Bridge模块上,更加是在JS和Native模块间频仍的调用会促成Bridge压力过大,发生卡顿

  1. 应用React自带的Virtual
    Dom的Diff算法尽量减弱需求联合的数额,理所当然选择setState方法
  2. 在遇见动画质量难题时,可以使用Annimated类的库,一次性把哪些转变的宣示发送到Native侧,Native侧按照接收到的扬言自己承担接下去的UI更新。不必要每帧的UI变化都一头五次数据。
  3. Native和JS混编,把会多量变动的组件做成Native组件
  4. 相遇UI事件响应和UI更新同时,可以应用Interaction
    Manager
    把这多少个耗时较长的做事布署到具有互动或动画落成之后再开展

4.6.1 JS调用Native

当JS层不能满足须求时,通过必要Native层支持提供接口,来供JS层调用。RN提供Native
Modules的主意来支撑。

大致来说,就是Native根据规则定义好接口,同时登记到RN中,JS层直接调用即可。

通晓,那种形式定义的Native Module无法动态公布,它要求一定在APP中。

App高品质开发率领

RN的开发并没有一种高质量出现的章程,因为种种项目间所有差其余零件组合,因此只可以通过连忙的开发格局来尽量的优化利用。
貌似的话,通过几版优化都能落得“极致体验”的渴求。
上边列一下神速开发格局的水流:

  1. 全JS实现,保险支付的高效用,高产出
  2. 察觉标题先在JS测做优化,如下面提到的Annimated类库,Interaction
    Manager。
  3. 真机测试,找全难题再做拍卖,幸免现身连锁bug
  4. JS测解决不了的标题再有Native组件完成。

4.6.2 定制�JS层组件

Component组件
以ImageText为例(ImageText.js)

'use strict';

import React, {Component} from 'React';
import {
  View,
  Image,
  Text,
} from 'react-native';

class ImageText extends Component {

  props: {
    imgUrl?: string,
    text?: string,
  }

  render() {
    return(
      <View style={styles.container}>
        <Image style={styles.img} source={{uri: this.props.imgUrl}}></Image>
        <Text style={styles.text}>{this.props.text}</Text>
      </View>
    )
  }
}

var styles = {
  container: {
    flexDirection: 'row',
    marginRight: 8,
  },
  img: {
    width: 14,
    height: 14,
  },
  text: {

  },
}

module.exports = ImageText;

�然后将Component输出:

module.exports = ImageText;

主意组件
以网络请求为例,互连网请求平常会助长有些能用参数。可以定义一个互连网请求组件(Requestor.js)。

'use strict';

import HOST from './Host';

function get(url, headers) {
  if (headers == null) {
    headers = {};
  }
  headers[HOST.API_VERSION_KEY] = HOST.API_VERSION_VALUE;
  console.log("headers: " + JSON.stringify(headers));
  return fetch(url, {
    headers: headers
  })
}

module.exports = {get};

内需将艺术组件输出:

module.exports = {get};

常量组件

'use strict';

var apiVersion = 200;

module.exports = {
  HOST: "http://api.kkmoving.com",
  API_VERSION_KEY: "apiVersion",
  API_VERSION_VALUE: apiVersion
};

有关热更新

4.6.3 使用Native UI组件

Native UI组件定义参考Native UI
Components

简单的话,就是概念好Native
UI组件,然后经过ViewManager注册到RN中,同时在JS层定义Component,关联到Native
UI组件。然后,这几个Component就足以行使。

�须要留意的是,假若Native
UI组件必要自定义大小,要求卓殊完毕LayoutShadowNode并涉嫌到ViewManager,LayoutShadowNode提供MeasureFunction回调来促成组件的丈量。具体达成能够参见RN的Text组件达成(Native
代码:ReactTextViewManager,ReactTextView,ReactTextShadowNode)。

原理

1、RN是行使脚本语言来编排的,是的代码可以不用事先编译便可即读即运行
2、RN在宣布时将代码资源打包成一个文件 bundle js文件
3、其余的底蕴插件不变,仅仅替换一个bundle文件就兑现了热更新

4.7 RN工程打包

RN打包分为五个部分,一个是bundle打包,一个是APP打包。

bundle打包,是指bundle的JS文件和图表资源打包为单独的文书,�作为创新包供远程下载。那是动态bundle。

bundle打包命令:

react-native bundle --platform android --dev false \
--entry-file xxx.android.js \
--bundle-output xxx.android.bundle \
--assets-dest xxx

APP打包,首先执行bundle打包,将转移的静态bundle跟随app包一起公布。有限支撑无网时亦可显示应用基本作用。

在Android上,跟随打包会将JS文件打包到assets目录中,同时将图纸资源打包到drawable目录中。

RN打包Android的艺术是因此gradle,在正常apk打包进度从前,会编译RN的bundle。但默许只好打包一个bundle,假诺急需协助打包八个bundle,需求修改react.gradle文件(node_modules/react-native/react.gradle)。

RN在付出调试相比较便利,通过react-native run-android运行应用,JS文件编写后,可以直接在使用上reload来促成立异,不必要再度安装APP,类似网页直接刷新的功效。

流程

亚洲必赢官网 16

热更新的流程图

4.8 热发表得以已毕

RN热公布的方针相对简便易行。

在APP端,开头阵布APP时,自带静态bundle,并每个bundle维护一个版本号。
运用在方便的机遇,检查bundle是不是须求立异。倘使有更新,则下载动态bundle。
�应用优先加载动态bundle,如无动态bundle刚加载静态bundle。

在服务端,�提供动态bundle的发布,版本维护,更新检测和下载。

那是最简便易行的国策,当然要做得精细,还索要考虑差量更新,bundle拆包(前边会讲)。

Rushy

Rushy是国内RN团队自主研发的一套热更新包管理平台

5 �RN实践之商品详情页

亚洲必赢官网 17

商品详情页

界面完成(Demo)

  • ScrollView
  • ViewPager
  • 带样式的Text
  • 长距离加载的Image
  • 浮层
  • 动画
  • 地址拔取
  • RN WebView

在线更新(Demo)

  • 检查更新
  • 下载/解压
  • 动用创新

Pushy的特点:

  1. 命令行工具&网页双端管理,版本发表进度大约便捷,完全可以集成CI。
  2. 依据bsdiff算法成立的超小更新包,经常版本迭代后在1-10KB之间,避免数百KB的流量消耗。
  3. 支撑崩溃回滚,安全可看重。
  4. meta信息及开放API,提供更高伸张性。
  5. 超过三个版本进行翻新时,只须要下载一个更新包,不需求逐版本依次更新。

亚洲必赢官网 18

6 踩过的坑

社区

RN同ReactJS一样,有着强大的社区,从RN版本更新的速度上就可以看出来

亚洲必赢官网 19

表露种类表

平均2个月一个版本

google的搜索结果也能申明RN的影响力

亚洲必赢官网 20

google搜索结果

开发者须求运用的零部件在JS.Coach基本都可以找到。

亚洲必赢官网 21

image.png

6.1 混淆设置

在RN中即使要利用Proguard,要求做多个设置:

  • 在build.gradle中设置:

def enableProguardInReleaseBuilds = true

  • 在proguard.pro中,基于RN官方Proguard模板,其它安装:

-keep class com.facebook.** { *; }

这点相比较坑,官方文档和各个模板中都尚无关联。要是不加一句,release运行时会直接crash。

参考&分享

  • ReactNative
    官方网站:http://reactnative.com
  • ReactNative
    中文官方网站:http://reactnative.cn
  • React
    Native质量和效能平衡之谜:http://zhuanlan.51cto.com/art/201704/537115.htm
  • React
    Native通信机制详解:http://blog.cnbang.net/tech/2698/
  • React Native
    从入门到原理:http://www.jianshu.com/p/978c4bd3a759
  • React-Native学习指南:http://www.jianshu.com/p/fd4591a978ba
  • 【简书专题】React
    Native开发经历集:http://www.jianshu.com/c/45054b9e38c7

6.2 Android Studio设置

  • gradle.properties无法设置org.gradle.configureondemand=true

现实原因不详

7 待化解的题材

  • RN基础库较大(6M)。
  • Bundle文件过大(基础Bundle
    500k左右)。Bundle拆包,将RN库的JS拆离到独门的基础Bundle。
  • 复杂组件的JS达成。
  • 质量分析和优化。
网站地图xml地图