天津网站制作|天津网站制作公司|天津网站设计|天津网站设计公司-龙禧科技专注网站建设19年，服务客户超过7000家！

入门

为了让初学者更容易地理解和接受一个新框架/库本身，而不被其它额外因素所困扰（如：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同样是由两个库组成：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是异步的。