摘要：與是一種標(biāo)準(zhǔn)，是對(duì)該標(biāo)準(zhǔn)的一個(gè)實(shí)現(xiàn)。因此支持了返回多個(gè)同級(jí)節(jié)點(diǎn)的功能，如這一特性可以有效減少頁(yè)面的嵌套層級(jí)，從而減少應(yīng)用因嵌套層級(jí)過(guò)多而出現(xiàn)的問(wèn)題。未來(lái)這是口號(hào)，亦是目標(biāo)。

Rax is a universal JavaScript library with a largely React-compatible API. If you use React, you already know how to use Rax.

Rax
2015 年雙十一，Weex 的方案開(kāi)始逐步使用，經(jīng)過(guò)這次試水，證明了這套方案未來(lái)的場(chǎng)景及可行性，接著 2016 年 Weex 開(kāi)始進(jìn)入快速發(fā)展的階段。但是使用 Weex 就意味著必須用 Vue 的語(yǔ)法，這對(duì)于整個(gè)團(tuán)隊(duì)來(lái)說(shuō)是一個(gè)不小的挑戰(zhàn)：PC 場(chǎng)景下的項(xiàng)目，小伙伴們普遍基于 React 開(kāi)發(fā)，已經(jīng)有了相當(dāng)多的經(jīng)驗(yàn)與沉淀。如果無(wú)線的項(xiàng)目要采用一個(gè)不同方案（Vue）去做，強(qiáng)推未必會(huì)不奏效，但是小伙伴們大概會(huì)傷心吧。

于是我們嘗試將 React 與 Weex 結(jié)合起來(lái)，但是由于方案太過(guò) hack 導(dǎo)致各種問(wèn)題，遂無(wú)奈放棄。接著 Rax 的方案應(yīng)運(yùn)而生：「Rax 基于 React 的標(biāo)準(zhǔn)，支持在不同容器中渲染，當(dāng)前最重要的容器即 Weex 和 Web」。

Rax 與 React
React 是一種標(biāo)準(zhǔn)，Rax 是對(duì)該標(biāo)準(zhǔn)的一個(gè)實(shí)現(xiàn)。Rax 只是無(wú)線端的解決方案，與 React 并無(wú)沖突。事實(shí)上淘寶 PC 端的新項(xiàng)目，依然主要是基于 React。當(dāng)然，Rax 跟 Preact 之類的方案也有本質(zhì)區(qū)別，前者偏向于解決多端問(wèn)題，后者偏向于解決性能問(wèn)題，具體可參考下文「Rax 的特點(diǎn)」。

Rax 的特點(diǎn)
1、設(shè)計(jì)上支持不同容器

Rax 在設(shè)計(jì)上抽象出 Driver 的概念，用來(lái)支持在不同容器中渲染，比如目前所支持的：Web, Weex, Node.js. 基于 Driver 的概念，未來(lái)即使出現(xiàn)更多的容器（如 VR 等），Rax 也可以從容應(yīng)對(duì)。Rax 在設(shè)計(jì)上盡量抹平各個(gè)端的差異性，這也使得開(kāi)發(fā)者在差異性和兼容性方面再也不需要投入太多精力了。

2、體積足夠小

如上文所說(shuō)，Rax 是一個(gè)面向無(wú)線端的解決方案，因此自身的體積對(duì)于性能來(lái)講就顯得非常重要。Rax 壓縮 + gzip 后的體積是 8.0kb, 相比 React 的 43.7kb, 對(duì)于無(wú)線端友好了很多。

3、支持返回多個(gè)同級(jí)節(jié)點(diǎn)

任何用過(guò) React 的同學(xué)大概都踩過(guò)同一個(gè)坑：方法返回了多個(gè)同級(jí)節(jié)點(diǎn)導(dǎo)致報(bào)錯(cuò)。在設(shè)計(jì)上 React 只能返回單個(gè)節(jié)點(diǎn)，因此頁(yè)面上或多或少會(huì)產(chǎn)生一些冗余的節(jié)點(diǎn)，這在 PC 端并沒(méi)有太多問(wèn)題，然而在無(wú)線 Android 端嵌套層級(jí)越多，應(yīng)用的 crash 率會(huì)不斷提高，這一點(diǎn)在低端 Android 機(jī)上表現(xiàn)尤其明顯。因此 Rax 支持了返回多個(gè)同級(jí)節(jié)點(diǎn)的功能，如：

import {createElement, Component, render} from "rax";

class Test extends Component {
  render() {
    return [1, 2, 3].map((item) => {
      return 
{item}
;
    });
  }
}

這一特性可以有效減少頁(yè)面的嵌套層級(jí)，從而減少應(yīng)用因嵌套層級(jí)過(guò)多而出現(xiàn)的 crash 問(wèn)題。

4、標(biāo)準(zhǔn)化

在上文里，我們不斷的提各個(gè)端的一致性，一致則必有規(guī)范可依，Rax 遵循 W3C 標(biāo)準(zhǔn)，比如在 Weex 容器中已經(jīng)可以直接調(diào)用 navigator, document, location, alert 等 W3C 的標(biāo)準(zhǔn) API.

當(dāng)然，受限于各個(gè)端的差異，標(biāo)準(zhǔn)化的道路還很長(zhǎng)，「更標(biāo)準(zhǔn)化」這也是 Rax 未來(lái)的重要目標(biāo)之一。

未來(lái)
Write once, run everywhere. 這是口號(hào)，亦是目標(biāo)。Rax 未來(lái)會(huì)在更多的端上不斷探索，比如 VR/AR, 甚至之前微博上有同學(xué)提出的是否可以用 Rax 寫微信小程序，也是一個(gè)蠻有意思的想法。

對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，當(dāng)越來(lái)越多的端不斷出現(xiàn)在眼前時(shí)，我們應(yīng)該如何應(yīng)對(duì)？是通過(guò)不斷的踩坑來(lái)整理一份長(zhǎng)長(zhǎng)的 checklist, 然后做項(xiàng)目時(shí)一一對(duì)照？ 或者讓我們一起來(lái)探索 Rax?

了解更多 Rax 相關(guān)內(nèi)容，歡迎訪問(wèn) alibaba.github.io/rax

Rax 團(tuán)隊(duì)敬上。

參考文章: http://taobaofed.org/blog/201...