?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 工具/框架 查看内容

RN转小程序引擎 Alita 1.2 版本发布

Rolan 2019-8-29 00:23

Alita在处理React语法的时候,采用了一种运行时处理JSX的技术,相对于社区现有的编译时方案,在JSX语法的支持上更加完备,关于运行时处理JSX的原理,详情请看。自发布以来,Alita受到了社区广泛的关注,有多个内外团 ...

Alita在处理React语法的时候,采用了一种运行时处理JSX的技术,相对于社区现有的编译时方案,在JSX语法的支持上更加完备,关于运行时处理JSX的原理,详情请看。

自发布以来,Alita受到了社区广泛的关注,有多个内外团队已经开始调研Alita的使用。1.2版本我们除了日常的bug修复,重点在运行性能做了改动,另外我们也在优化cli 命令行,让其更加友好。

Alita现在也放置到了React Native文档 Out-of-Tree Platforms 类目下

改进cli

让Alita更加易用,一直是我们的重要目标,我们也会根据用户的反馈不断优化Alita脚手架。

当前版本中,新增了 alita 提示信息,指引你正确得使用 alita 相关命令。当你输入 alita , alita -h 或其它非 alita 脚手架支持的 command ,都能够看到 alita 的正确用法。

性能优化

1.2版本在小程序的运行性能上做了很多改进,性能优化是个长期且细致的事情,在微信小程序?#29616;?#35201;的手段就是。

  1. 减少setData?#38382;?/li>
  2. 减少?#30475;蝧etData的数据量,

下面我们具体说明一下Alita的探索。

加入批量更新

微信小程序 2.4.0 ,提供了 groupSetData 接口。

这个接口的出现,给了 Alita 更加高效的刷数据到微信小程序的方式。 在 v1.2 版本,我们重写了内部 mini-react 和小程序层的数据交换方式,现在每一次 setState 产生的组件更新,都会被 groupSetData 合并到一次操作里面,这样大大减少了 setData ?#38382;?/p>

初始化组件优化

组件的初始化过程和更新略有不同,更加复杂一些。考虑以下的情况:

当 react 层计算出所有组件的渲染需要的数据的时候,首先刷数据给 L1 , L1 渲染完成,Alita获取到 L21 , L22 实例,刷数据, L21 结束,获取 L31 , L32 。。。这里的刷数据存在着 时序上?#21335;?#21518; ,很难通过 groupSetData 一次性的把所有数据传递给 L1,L21 ... L34 。

这里假定组件树结构有n层,我们最少是可以做到n次 groupSetData , 对应这里:

  1. 第一次: L1
  2. 第二次: L21 , L22
  3. 第三次: L31 , L32 , L33 , L34

Alita尝试过这个方案,在测试了几个业务之后,发现这个方案有两个问题,一般首屏页面初始会有7,8层,这样会有7,8次 groupSetData ,导致页面 TTI (首次可交互时间)变长。 更加?#29616;?#30340;是假如后面的组件结?#36141;芮常?#21069;面的组件结?#36141;?#28145;,会导致后面的组件先渲染完成,造成页面的 抖动 。

所以最终 Alita 也并没有采用上面的方案。 Alita 的方案如下: Alita 会把所有数据集合到一起 L1 , 通过 L1 的一次设置,渲染出 L1, L21, L22...L34 。 当这个过程结束的时候, Alita 持有了所有组件, 会在进行一次 groupSetData 修正一下数据。 这个方案只会固定的执行两次 groupSetData 。另外由于所有组件在一次 groupSetData 里面完成,故而不会有抖屏。

减少?#30475;蝧etData数据

Alita 1.2 精简了 react 层产生的数据描述结构,减少了描述数据的层级。补偿性的,把很多数据计算放在了 wxs 脚本里面

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: ARES 来自: 掘金
不朽的浪漫援彩金