React-Native知识点相关

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工具