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工具
最新文章
- 【linux草鞋应用编程系列】_3_ 进程间通信
- cat > file << EOF 的用法
- paip.语义分析--分词--常见的单音节字词 2_deDuli 单字词 774个
- The main concepts
- NOIP2013普及组 -SilverN
- Tiffany
- HTML5之新增标签用途及应用场景
- 【原创】EntityFramework Core 中使用 CodeFirst 模式时 PowerShell 版本问题及解决
- 《跟我学IDEA》五、快捷键（编码利器）
- Notepad++ --v7.5.8 (64bit) 安装目录显示插件（Explorer）
- leetcode-956. 最高的广告牌
- 《Gradle权威指南》--Android Gradle高级自定义
- ubuntu 常见命令整理
- CentOS下安装Hbase
- tar 压缩解压命令详解
- django中的缓存
- vmware 传输(vmdb)错误-32:pipe:read failed 解决方法
- 编写高质量代码改善C#程序的157个建议——建议78：应避免线程数量过多
- 数据库理论-范式(1NF、2NF、3NF)
- 查看服务器配置信息prtdiag与systeminfo实用命令