為了讓初學者更容易地理解和接受一個新框架/庫本身,而不被其它額外因素所困擾(如: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
組件類,包含了內(nèi)聯(lián)樣式「css in js」與react/react-native類似,Rax同樣是由兩個庫組成:rax
和rax-components
:
元件
,提供了UI跨平臺的能力所以:一般來說,基于元件編寫的復合組件
,是可以同時運行在Native
和Web
上的。
雖然Rax實現(xiàn)了大部分React-compatible API,可能出于底層需要適配Weex API以及Native性能上的一些考慮,所以在實現(xiàn)細節(jié)上,還是會有一些差別,比如:
createClass()
方法,更推薦使用ES6 Class
替代(Rax并不像React有過多的歷史包袱)container node
渲染時,并不會清空當前容器的子節(jié)點,而是直接采用appendChild
的方式setState()
方法是同步的,不再支持批處理更新(batchedUpdates),而React是異步的。更多內(nèi)容詳見「Difference with React」。