RN轉小程序引擎 Alita 1.2 版本發佈

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腳本里面

其餘改動

1. 減小生成小程序包體積

2. 從新實現componentWillUnmount生命週期，再也不依賴微信小程序detached回調

3. 修改自定義組件render返回null的時候，微信小程序組件依然存在的bug

4. 修復componentGenerics 字段的在老開發者工具下的警告，在新的開發者工具下的報錯

5. 修復文件後綴爲jsx的時候，轉化產生的bug

6. 其餘平常bug修復

更多詳情移步Github Alita，感謝 star

關注 ARES Labs 公衆號