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 ...
随机推荐
- 5.20 省选模拟赛 T1 图 启发式合并 线段树合并 染色计数问题
LINK:图 在说这道题之前吐槽一下今天的日子 520 = 1+1+4+514. /cy 这道题今天做的非常失败 一点分都没拿到手 关键是今天的T3 把我整个人给搞崩了. 先考虑 如果得到了这么一张图 ...
- bzoj 题目选做
这里将记录着我在接下来的日子里在bzoj上遇到的各种 毒瘤题目 1.轮状病毒 题目是很没意思的 列出状态 显然无法递推 我简单推了一下加动态加点的状态 嗯发现规律没有那么简单 打表 也不太能发现吧 正 ...
- SpringAOP 面向切面编程
AOP的相关概念 AOP:全称是 Aspect Oriented Programming 即:面向切面编程. 简单的说它就是把我们程序重复的代码抽取出来,在需要执行的时候,使用动态代理的技术,在不修改 ...
- SpringBoot设置跨域的几种方式
什么是跨域? 浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 原因: 由于浏览器的同源策略, 即a网站只能访问a网站的内容,不能访问b网站的内容. 注意: 跨域问题 ...
- lombok的基本使用方法
在java刚开始学习的时候,首先就会学习封装.继承和多态,就拿封装来说,封装就是为了保护数据安全而将实体类内部数据保持为私有状态,如果外部程序想要访问里面的数据就必须调用此实体类提供的相关数据接口,这 ...
- Python安装工具
1.官网下载地址是:https://www.python.org/downloads/ 默认下载安装时记得勾选配置PATH路径 PIP工具包(我是选择Python 3.5的) 2.Windows 下 ...
- SpringBoot学习之整合Swagger
Swagger介绍 1.什么是Swagger 作为后端程序开发,我们多多少少写过几个后台接口项目,不管是编写手机端接口,还是目前比较火热的前后端分离项目,前端与后端都是由不同的工程师进行开发,那么这之 ...
- C#-用Winform制作一个简单的密码管理工具
为什么要做? 首先是为了练习一下c#. 想必大家都有过记不起某个平台的账号密码的经历,那种感受着实令人抓狂.那这么多账号密码根本记不住!我之前用python写过一个超级简单(连账号信息都写在代码里那种 ...
- Flutter 容器(7) - DecoratedBox
DecoratedBox: 装饰容器,在其子widget绘制前(或后)绘制一个装饰Decoration(如背景.边框.渐变等) import 'package:flutter/material.dar ...
- “既生 ExecutorService, 何生 CompletionService?”
前言 在 我会手动创建线程,为什么要使用线程池? 中详细的介绍了 ExecutorService,可以将整块任务拆分做简单的并行处理: 在 不会用Java Future,我怀疑你泡茶没我快 中又详细的 ...