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 ...
随机推荐
- Linux搭建Gitlab(Docker版)
1.拉取gitlab的docker镜像 #这里使用gitlab的社区版 docker pull gitlab/gitlab-ce 2.启动gitlab容器实例 docker run -d -p 44 ...
- 连接云MariaDB实例
新建实例 MariaDB CVM 内网连接 CVM远程登录测试(同一个VPC下): CVM安装客户端: yum install mysql 连接: mysql -h MariaDB内网ip -u 数据 ...
- KMP算法-从入门到进阶
题目描述 给定一个文本串text和模式串pattern,从文本串中找出模式串第一次出现的位置 先来看最简单的方法,方便理解题目,也就是暴力求解 暴力求解 放大上面的图,得到下面这个.题目要求匹配到整个 ...
- python4.5实用内置模块
#引入urllib百度网页的数据爬取 from urllib import request url="http://www.baidu.com"data=request.urlop ...
- 最全总结!聊聊 Python 发送邮件的几种方式
1. 前言 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人,我给大 ...
- HTTP POST 请求的两种编码格式:application/x-www-form-urlencoded 和 multipart/form-data
在常见业务开发中,POST 请求常常在这些地方使用:前端表单提交时.调用接口代码时和使用 Postman 测试接口时.我们下面来一一了解: 一.前端表单提交时 application/x-www-fo ...
- Redis服务之Redis5集群相关命令说明
上一篇博客主要聊了下redis.trib.rb这个工具来管理redis3/4 cluster 中的节点,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13456 ...
- 2020-06-15:Redis分布式锁怎么解锁?
福哥答案2020-06-15: 答案来自群成员:1.setnx:del2.set:lua+del3.redisson:@Overridepublic void unlock(String lockKe ...
- CTF bossplayers 靶机
WAYs: robots.txt文件提供线索,命令执行漏洞获得反弹shell suid命令提升权限 1:netdiscover 发现主机地址192.168.1.109 2:使用namp进行端口扫描发现 ...
- 精讲RestTemplate第7篇-自定义请求失败异常处理
本文是精讲RestTemplate第7篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...