ReactNative火速入门笔记,质量之谜

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社区生态圈的加持和脸谱的大力推广以外,其余一个最根本的原因就是其在开发作用和动用品质方面得到了一个比较好的平衡:

美高梅开户网址 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/斯维夫特代码,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中定义好)。

此地的数量也囊括剧本数据的处境,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/斯维夫特代码,Android平台上运行Java/Kotlin代码
  • 担负处理UI的渲染,事件响应。

JS王国:

  • 运行在JS引擎的JS线程上
  • 运行JS代码
  • ReactNative火速入门笔记,质量之谜。负责处理业务逻辑,还包蕴了相应显得哪个界面,以及怎样给页面加样式。

在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侧数据同步时,也会爆发品质难题。

环境

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/Swift代码,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地图