React-Native知识点相关
React-Native相关
一,为什么要使用React-native?
- Hybrird的首屏时间太慢,白屏太久,影响用户体验;
- 原生native开发成本较高;
这里补充一点Webview的性能优化:
Hybrid最大的问题就是首次打开白屏时间较长,原因是Webview初始化时耗时较长,等到初始化完成后,再去请求页面资源数据就更久了,这是一个串行的过程,所以比较久。
因此针对这一点,可以做以下优化:
- 在使用前预先初始化好Webview,比如客户端刚启动的时候,就可以开始初始化一个全局的Webview备用了;
- 在初始化的同时,通过native来完成一些网络请求等过程,使得变为并行;
- DNS采用和客户端API相同的域名,因为DNS会在系统级别进行缓存,这样减少Webview的DNS解析时间;
尽管如此,白屏时间依然达不到我们期待的1s之内,因此果断选择了RN去重构!
二,什么是JSBridge,解释一下它的原理?
JSBridge一般用在Web的Hybrid解决方案以及React-Native上,有了它可以利用Web API去调用Native的功能。它的核心是构建native和非native之间的消息通信的通道,而且是双向通道。(所谓的双向通道就是JS向Native发送信息,调用相关功能,通知当前JS的状态,然后Native再回溯调用结果,消息推送,返回Native的状态。)
Javascript是运行在一个单独的JS Context中(比如Webkit和JS Core),和原生的运行环境是隔离开来的,因此这种情况与RPC(远程过程调用)通信有点类似,可以把JS当做RPC客户端,Native当做RPC服务端,因此JSBridge要实现的主要逻辑就是:通信调用和句柄解析调用。
1,通信调用的原理:
- JavaScript调用Native一般使用的是注入API的方式
- Native调用JavaScript是直接执行拼接好的Javascript代码即可
2,句柄解析调用的原理:
其实就是句柄与功能的对应关系,将句柄抽象为BridgeName(桥名),最终演化成一个BridgeName对应一个Native功能或一类消息。
最后Native的callback,实际上就是利用一个唯一标识callbackId来进行回调。JavaScript里定义好函数以及唯一标识callbackId,然后将这个id传给Native,Native回调的时候将返回值和callbackId再回传给JavaScript,类似于Jsonp的实现。
三,RN是怎么运行的?
RN本质上就是JavascriptCore + React + JSBridge
RN会把应用代码编译成两个js bundle文件,一个index.ios.bundle.js,一个index.android.bundle.js,这两个文件会在内置的JS运行环境里执行,IOS是JS Core,Android是webkit,JS引擎是JavaScriptCore。
UI渲染部分,利用RN底层的React,将JSX转换成虚拟DOM,然后通过diff算法生成一个JSON文件,再借助JSBridge调用Native的API根据这个JSON文件进行绘制,最终渲染到屏幕上。
四,Hermes了解么?
Hermes是Facebook自研的一款JavaScript引擎,用来优化安卓上的react native,主要优化点是3个:
- TTI
- APP的下载大小
- 内存占用
五,RN性能优化?
1,减少re-render
- shouldComponentUpdate
- React.memo
- PureComponent
2,利用Fragment避免多层View嵌套,特别是封装组件的时候
3,加载图片可以使用WebP格式,图片体积明显减少
4,最重要的动画性能优化:
一般大部分设备,只要保证60fps的帧率就可以了,首先要知道为什么动画会卡顿,原因就是在原生应用里,UI是由特定的绘制UI的线程控制的,而JS线程需要去通知UI线程进行绘制,但这个过程是异步的,如果JS线程上任务较多,就很难保证每一帧都是及时渲染的。因此为了动画不卡,需要考虑两点:
- 减少JS线程和UI线程之间的异步通信
- 减少JS线程上的计算
优化手段有:
- useNativeDrive设为true,这个属性是开启原生驱动,利用原生代码在UI线程上执行绘画,不需要持续通过JS线程
- setNativeProps,这个等同于直接修改浏览器的DOM
- 借助一些优秀的第三方animate动画库,比如react-native-reanimated,基本思路也是减少JS线程的计算和通信,利用原生UI线程进行绘制
5,针对ListItems 优化,使用getItemLayout提前计算高度
六,RN调试工具?
1,react-native官方调试工具 (command + D)
2,react-devtools
3,XCode里,Profile工具
React-Native知识点相关的更多相关文章
- React Native知识点
1. Live Reload和Hot Reloading的区别: 相同点:都是你只要保存一下原文件,那么App就会实时刷新. 区别:Live Reload是全局刷新,而Hot Reloading是局部 ...
- window环境下搭建react native及相关插件
可以先浏览一下中文翻译的开发文档具体了解一下关于React Native,想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting- ...
- react native 知识点总结(一)
一.关于react native 版本的升级 参照文档:http://reactnative.cn/docs/0.45/upgrading.html react-native -v 查看当前版本 ...
- Windows版本搭建安装React Native环境配置及相关问题
此文档整理参考地址: http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C% ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- React Native的环境搭建以及开发的IDE
(一)前言 前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging).本节的前提条件 ...
- 转 : React Native 开发之 IDE 选型和配置
转:https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde30 ...
- React native android 最常见的10个问题
这里逐条记录下最容易遇到的React native android 相关case: 1. app启动后,红色界面,unable load jsbundle : 解决办法:一般来说就是,你是用dev-s ...
- 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...
随机推荐
- Mac上使用Docker安装SQLServer
拉取 SQL Server 2017 Docker 镜像 docker pull microsoft/mssql-server-linux:2017-latest 运行Docker镜像 docker ...
- JsLint undeclared ‘window’
如果使用IDEA 设置一下 globals 或 /*global window */ ... your script goes here https://stackoverflow.com/quest ...
- demo1 动态显示view或弹框 动态隐藏view或弹框
实现界面如上所示: 有一个弹框,弹框上边有一个关闭按钮,点击按钮,可以关闭弹框.点击弹框的周围区域也可以关闭按钮. 点击上边的隐藏弹框也可以关闭按钮. 在实现功能的基础上,以动画的形式展示跟隐藏. 思 ...
- 暑期java(面向对象设计)学习第一阶段总结
0.前言 本次博客针对的是暑假学习java(面向对象设计)的前三次作业的小结,第一次作业:7-1 对三个整数排序 7-2 对四个整数排序 7-3 对十个整数进行排序 7-4 对多个整数进行排序 第二次 ...
- 用 Python 制作一个艺术签名小工具,给自己设计一个优雅的签名
生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...
- 大学生可用来接单,利用Python实现教务系统扩容抢课!
最近一学期一次的抢课大戏又来了,几家欢乐几家愁.O(∩_∩)O哈哈~(l我每次一选就过了hah,我还是有欧的时候滴).看着他们盯着教务系统就着急,何况我们那教务系统,不想说什么.emmm 想周围的朋友 ...
- 同一台服务器部署三个Tomcat
工具 apache-tomcat-8.0.30 安装tomcat步骤 1. 下载apache-tomcat-8.0.30 ,下载下来的文件为apache-tomcat-8.0.30 ...
- 11、Composite 组合模式 容器与内容的一致性(抽象化) 结构型设计模式
1.Composite模式定义 组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这 ...
- day26:装饰器
装饰器 1.装饰器 : 为原函数去扩展新功能,用新函数去替换旧函数 2.作用 : 在不改变原代码的前提下,实现功能上的扩展 3.符号 : @(语法糖) 1.装饰器的基本用法 # 1.装饰器的基本用法 ...
- 03-java实现循环链表
03java实现循环链表 本人git https://github.com/bigeyes-debug/Algorithm 一丶单向循环链表 就是为尾节点指向头结点 二丶单向循环链表的接口设计 比较单 ...