用戶
 找回密碼
 立即注冊

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版本在小程序的運行性能上做了很多改進,性能優化是個長期且細致的事情,在微信小程序上主要的手段就是。

  1. 減少setData次數,
  2. 減少每次setData的數據量,

下面我們具體說明一下Alita的探索。

加入批量更新

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

這個接口的出現,給了 Alita 更加高效的刷數據到微信小程序的方式。 在 v1.2 版本,我們重寫了內部 mini-react 和小程序層的數據交換方式,現在每一次 setState 產生的組件更新,都會被 groupSetData 合并到一次操作里面,這樣大大減少了 setData 次數。

初始化組件優化

組件的初始化過程和更新略有不同,更加復雜一些。考慮以下的情況:

當 react 層計算出所有組件的渲染需要的數據的時候,首先刷數據給 L1 , L1 渲染完成,Alita獲取到 L21 , L22 實例,刷數據, L21 結束,獲取 L31 , L32 。。。這里的刷數據存在著 時序上的先后 ,很難通過 groupSetData 一次性的把所有數據傳遞給 L1,L21 ... L34 。

這里假定組件樹結構有n層,我們最少是可以做到n次 groupSetData , 對應這里:

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

Alita嘗試過這個方案,在測試了幾個業務之后,發現這個方案有兩個問題,一般首屏頁面初始會有7,8層,這樣會有7,8次 groupSetData ,導致頁面 TTI (首次可交互時間)變長。 更加嚴重的是假如后面的組件結構很淺,前面的組件結構很深,會導致后面的組件先渲染完成,造成頁面的 抖動 。

所以最終 Alita 也并沒有采用上面的方案。 Alita 的方案如下: Alita 會把所有數據集合到一起 L1 , 通過 L1 的一次設置,渲染出 L1, L21, L22...L34 。 當這個過程結束的時候, Alita 持有了所有組件, 會在進行一次 groupSetData 修正一下數據。 這個方案只會固定的執行兩次 groupSetData 。另外由于所有組件在一次 groupSetData 里面完成,故而不會有抖屏。

減少每次setData數據

Alita 1.2 精簡了 react 層產生的數據描述結構,減少了描述數據的層級。補償性的,把很多數據計算放在了 wxs 腳本里面

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: ARES 來自: 掘金
不朽的浪漫援彩金
天津麻将玩法规则 福建体彩网11选5遗漏 幸运农场秘籍 网上玩江苏快3是骗局吗 今日3d试机号是多 乐乐安徽麻将安卓版本 体彩河南泳坛夺金玩法 3d试机号牛材网 黑龙江22选5走势图2元网 心水一点必中特第20期 怎样下载哈灵麻将 辽宁11选5走势图 四川金7乐 山东11选5走势图 pk10最牛稳赚5码计划 贵州亦乐捉鸡麻将下