入門

為(wèi)了讓初學(xué)者更容易地理(lǐ)解和接受一個新(xīn)框架/庫本身，而不被其它額外因素所困擾（如：redux、router）。

本篇的開頭，選擇從最簡單的Demo – Hello Wrold說起：

// 頂層API
import { createElement, Component, render } from 'rax';
// 元件引用(yòng)
import { View, Text } from 'rax-components';

// 樣式定義
const styles = {
  app: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
};

// 組件定義
const HelloWorld = (props) => {
  return (
    <View style={styles.app}>
      <Text>Welcome to Rax，{ props.name }</Text>
    </View>
  );
};

// 渲染（挂載）
render(<HelloWorld name="Lovesueee" />);
本篇的開頭，選擇從最簡單的Demo – Hello Wrold說起：

上述Demo很(hěn)簡單，就像之前所說，Rax使用(yòng)了React DSL/JSX，這裏主要做了兩件事：

• 定義了一個HelloWorld組件類，包含了内聯樣式「css in js」
• 将““标簽”渲染到頁(yè)面/容器裏，這其實是一個組件實例化的過程

與react/react-native類似，Rax同樣是由兩個庫組成：rax和rax-components：

• rax – 核心渲染庫，提供了React-compatible API
• rax-components – 輔助組件庫，更準确地說，應該是：元件，提供了UI跨平台的能(néng)力

所以：一般來說，基于元件編寫的複合組件，是可(kě)以同時運行在Native和Web上的。

差異點

雖然Rax實現了大部分(fēn)React-compatible API，可(kě)能(néng)出于底層需要适配Weex API以及Native性能(néng)上的一些考慮，所以在實現細節上，還是會有(yǒu)一些差别，比如：

• 不支持createClass()方法，更推薦使用(yòng)ES6 Class替代（Rax并不像React有(yǒu)過多(duō)的曆史包袱）
• 向指定container node渲染時，并不會清空當前容器的子節點，而是直接采用(yòng)appendChild的方式
• setState()方法是同步的，不再支持批處理(lǐ)更新(xīn)（batchedUpdates），而React是異步的。
• …

更多(duō)内容詳見「Difference with React」。

參考資料

• Rax Github