• 中文
  • 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」

参考资料

订阅我们