自從Alita發(fā)布以來，由于Alita和Taro一樣都是React語法在小程序上的處理， 所以一直有很多人問我“已經(jīng)有Taro了，為什么又造輪子呢？？”，今天用這篇文章統(tǒng)一回答一下。

首先我們看下Taro，他是一套遵循 React 語法規(guī)范的 多端開發(fā) 解決方案。他遵循 React 語法規(guī)范，采用與 React 一致的組件化思想，組件生命周期與 React 保持一致，同時支持使用 JSX 語法，讓代碼具有更豐富的表現(xiàn)力，使用 Taro 進(jìn)行開發(fā)可以獲得和 React 一致的開發(fā)體驗。

截止本文開始的時候，Taro在github上已經(jīng)獲得了2W多star，實際上線的業(yè)務(wù)也是非常多的，另外Taro已經(jīng)形成了自己的開發(fā)者社區(qū)，其周邊的工具非常的豐富，可以說是非常成熟，非常成功的開源項目了。

回到故事的開始：怎么樣把React程序（主要是JSX）運行在小程序呢？
Taro采用的是編譯時方案，通過對代碼靜態(tài)的分析，把JSX修改為等效wxml。

這種方式的局限在于JSX是動態(tài)的，編譯時是沒有辦法完全表達(dá)JSX的。React“編程”式的構(gòu)建UI，更多的是把JSX當(dāng)成一個普通的數(shù)據(jù)類型來看待，一個JSX片段，可以用來初始化變量，可以作為函數(shù)參數(shù)，可以作為函數(shù)返回值等等

var a = <View><Text>Hi</Text></View>

function f(b) {
    const r =  [
        b,
        <Text>Hello</Text>
    ]
    r.push(a)
}
var x = f(<Text></Text>)

...

編譯時方案嘗試在編譯期推理運行期的信息，這會有很大的局限性。

而類比React Native的渲染思路，有沒有一種方案上層還是React環(huán)境，然后底層渲染通過小程序的方式。

Alita正是基于這種設(shè)計思路的嘗試。Alita希望提供一種真正意義上的React與小程序的結(jié)合。

不過上面的方式貌似對React語法是完全的支持，但是實際使用過Alita的人，也知道Alita對語法還是有一些限制。這主要是因為出于潛在的性能因素的考慮， Alita采用了 微信小程序自定義組件映射React組件的方式，他們之間有很大不同，比如微信小程序自定義組件引用的組件必須預(yù)先在json文件定義其路徑。

import {Hello, NiHao} from 'hello'

class A extends Component {
    render(){
        return <View>
            <Hello/>
            <NiHao/>
        </View>
    }
}

以上的NiHao組件，要獲取其組件路徑，其實還挺困難的，所以Alita會對組件文件有些限制來方便的獲取其路徑。 諸如此類。

總結(jié)

以上就是我們做Alita的一點思考，也算是對最開始的問題做個回答，另外基于相似的原理，我們還嘗試過把Flutter底層渲染機(jī)制換成小程序:flutter_mp https://github.com/areslabs/flutter_mp。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/25260.html