React-Native相关

一,为什么要使用React-native

  1. Hybrird的首屏时间太慢,白屏太久,影响用户体验;
  2. 原生native开发成本较高;

这里补充一点Webview的性能优化:

Hybrid最大的问题就是首次打开白屏时间较长,原因是Webview初始化时耗时较长,等到初始化完成后,再去请求页面资源数据就更久了,这是一个串行的过程,所以比较久。

因此针对这一点,可以做以下优化:

  1. 在使用前预先初始化好Webview,比如客户端刚启动的时候,就可以开始初始化一个全局的Webview备用了;
  2. 在初始化的同时,通过native来完成一些网络请求等过程,使得变为并行;
  3. 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,通信调用的原理:

  1. JavaScript调用Native一般使用的是注入API的方式
  2. 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个:

  1. TTI
  2. APP的下载大小
  3. 内存占用

五,RN性能优化?

1,减少re-render

  1. shouldComponentUpdate
  2. React.memo
  3. PureComponent

2,利用Fragment避免多层View嵌套,特别是封装组件的时候

3,加载图片可以使用WebP格式,图片体积明显减少

4,最重要的动画性能优化:

一般大部分设备,只要保证60fps的帧率就可以了,首先要知道为什么动画会卡顿,原因就是在原生应用里,UI是由特定的绘制UI的线程控制的,而JS线程需要去通知UI线程进行绘制,但这个过程是异步的,如果JS线程上任务较多,就很难保证每一帧都是及时渲染的。因此为了动画不卡,需要考虑两点:

  1. 减少JS线程和UI线程之间的异步通信
  2. 减少JS线程上的计算

优化手段有:

  1. useNativeDrive设为true,这个属性是开启原生驱动,利用原生代码在UI线程上执行绘画,不需要持续通过JS线程
  2. setNativeProps,这个等同于直接修改浏览器的DOM
  3. 借助一些优秀的第三方animate动画库,比如react-native-reanimated,基本思路也是减少JS线程的计算和通信,利用原生UI线程进行绘制

5,针对ListItems 优化,使用getItemLayout提前计算高度

六,RN调试工具?

1,react-native官方调试工具 (command + D)

2,react-devtools

3,XCode里,Profile工具

React-Native知识点相关的更多相关文章

  1. React Native知识点

    1. Live Reload和Hot Reloading的区别: 相同点:都是你只要保存一下原文件,那么App就会实时刷新. 区别:Live Reload是全局刷新,而Hot Reloading是局部 ...

  2. window环境下搭建react native及相关插件

    可以先浏览一下中文翻译的开发文档具体了解一下关于React Native,想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting- ...

  3. react native 知识点总结(一)

    一.关于react native 版本的升级 参照文档:http://reactnative.cn/docs/0.45/upgrading.html react-native -v   查看当前版本 ...

  4. 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% ...

  5. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  6. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  7. React Native的环境搭建以及开发的IDE

    (一)前言 前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging).本节的前提条件 ...

  8. 转 : React Native 开发之 IDE 选型和配置

    转:https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112392&idx=1&sn=135e29ddde30 ...

  9. React native android 最常见的10个问题

    这里逐条记录下最容易遇到的React native android 相关case: 1. app启动后,红色界面,unable load jsbundle : 解决办法:一般来说就是,你是用dev-s ...

  10. 《React Native 精解与实战》书籍连载「React Native 源码学习方法及其他资源」

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React Native 源码学习方法及其他资源. 最后的章节给大家介绍 React Native ...

随机推荐

  1. Mac上使用Docker安装SQLServer

    拉取 SQL Server 2017 Docker 镜像 docker pull microsoft/mssql-server-linux:2017-latest 运行Docker镜像 docker ...

  2. JsLint undeclared ‘window’

    如果使用IDEA 设置一下 globals 或 /*global window */ ... your script goes here https://stackoverflow.com/quest ...

  3. demo1 动态显示view或弹框 动态隐藏view或弹框

    实现界面如上所示: 有一个弹框,弹框上边有一个关闭按钮,点击按钮,可以关闭弹框.点击弹框的周围区域也可以关闭按钮. 点击上边的隐藏弹框也可以关闭按钮. 在实现功能的基础上,以动画的形式展示跟隐藏. 思 ...

  4. 暑期java(面向对象设计)学习第一阶段总结

    0.前言 本次博客针对的是暑假学习java(面向对象设计)的前三次作业的小结,第一次作业:7-1 对三个整数排序 7-2 对四个整数排序 7-3 对十个整数进行排序 7-4 对多个整数进行排序 第二次 ...

  5. 用 Python 制作一个艺术签名小工具,给自己设计一个优雅的签名

    生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...

  6. 大学生可用来接单,利用Python实现教务系统扩容抢课!

    最近一学期一次的抢课大戏又来了,几家欢乐几家愁.O(∩_∩)O哈哈~(l我每次一选就过了hah,我还是有欧的时候滴).看着他们盯着教务系统就着急,何况我们那教务系统,不想说什么.emmm 想周围的朋友 ...

  7. 同一台服务器部署三个Tomcat

    工具 apache-tomcat-8.0.30 安装tomcat步骤           1. 下载apache-tomcat-8.0.30 ,下载下来的文件为apache-tomcat-8.0.30 ...

  8. 11、Composite 组合模式 容器与内容的一致性(抽象化) 结构型设计模式

    1.Composite模式定义 组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这 ...

  9. day26:装饰器

    装饰器 1.装饰器 : 为原函数去扩展新功能,用新函数去替换旧函数 2.作用 : 在不改变原代码的前提下,实现功能上的扩展 3.符号 : @(语法糖) 1.装饰器的基本用法 # 1.装饰器的基本用法 ...

  10. 03-java实现循环链表

    03java实现循环链表 本人git https://github.com/bigeyes-debug/Algorithm 一丶单向循环链表 就是为尾节点指向头结点 二丶单向循环链表的接口设计 比较单 ...