入門

為了讓初學者更容易地理解和接受一個新框架/庫本身，而不被其它額外因素所困擾（如：redux、router）。

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

// 頂層API
import { createElement, Component, render } from 'rax';
// 元件引用
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很簡單，就像之前所說，Rax使用了React DSL/JSX，這里主要做了兩件事：

• 定義了一個HelloWorld組件類，包含了內聯樣式「css in js」
• 將““標簽”渲染到頁面/容器里，這其實是一個組件實例化的過程

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

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

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

差異點

雖然Rax實現了大部分React-compatible API，可能出于底層需要適配Weex API以及Native性能上的一些考慮，所以在實現細節上，還是會有一些差別，比如：

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

更多內容詳見「Difference with React」。

參考資料

• Rax Github