• 中文
  • ENGLISH
Rax深入淺出 – 入門
2017/02/09

入門

為了讓初學者更容易地理解和接受一個新框架/庫本身,而不被其它額外因素所困擾(如: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很簡單,就像之前所說,Rax使用了React DSL/JSX,這里主要做了兩件事:

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

與react/react-native類似,Rax同樣是由兩個庫組成:raxrax-components

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

所以:一般來說,基于元件編寫的復合組件,是可以同時運行在NativeWeb上的。

差異點

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

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

更多內容詳見「Difference with React」

參考資料

訂閱我們
体彩20选5开奖结果查询