React Native 新架构,小白也能看明白

  1. 批处理。对Native调用进行排队,批量处理。

异步设计的好处是不阻塞,这种设计在大部分情况下性能满足需求,但是在某些情况下就会出问题,比如瀑布流滚动。

当瀑布流向下滑动的时候,需要发请求给服务端拿数据进行下一步渲染。

滚动事件发生在UI thread,然后通过Bridge发给JS thread。JS thread 监听到消息后发请求,服务端返回数据,再通过Bridge返回给Native进行渲染。由于都是异步,就会出现空白模块,导致性能问题。

从上面可以看出,性能瓶颈主要是存在JS线程和Native有交互的情况,如果不存在交互,RN的性能良好。

因此,对于RN的优化,主要集中在Bridge上,有下面3个原则:

  1. JS和Native端不通信。最彻底的方式,消息不走Bridge。

  2. JS和Native减少通信。在两端无法避免的情况下,尽量通信减少次数。比如多个请求合并成一个。

  3. 较少JSON的大小。比如图片转为Base64会导致传输数据变大,用网络图片代替。

RN里面可以通过MessageQueue来监听Bridge通信,主要代码如下

import MessageQueue from ‘react-native/Libraries/BatchedBridge/MessageQueue.js’;

const spyFunction = (msg) => {

console.log(msg);</

  • 26
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值