App开发|网站开发建设|微信开发|秦皇岛卓云科技有限公司 App开发|网站开发建设|微信开发|秦皇岛卓云科技有限公司
卓云科技
  • Rax深入浅出-基础入门
  • TIME:2017-07-31/TYPE:卓云UED/FROM:阿里UED

    入门

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

    参考资料

  • Rax Github