天津網站制作|天津網站制作公司|天津網站設計|天津網站設計公司-龍禧科技十五年匠心設計, 未來觸手可及。

咨詢電話:022-588 36597

北京網站制作之—關于Rax深入淺出 – 入門的事情

發布時間:2017-09-18    瀏覽次數:

  

入門

為了讓初學者更容易地理解和接受一個新框架/庫本身,而不被其它額外因素所困擾(如: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是異步的。
JDB夺宝电子下载 重庆时时龙综合走势图 时时计划黑龙江时时 捕鱼来了 三分赛车计划网 3d之家近10开机号 时时彩龙虎和100% 广东时时走势图 全民大赢家官方下载 CMD体育平CMD体育平台 黑龙江时时11 彩票幸运飞艇现场直播 四川有没有时时彩 赛车pk10漏洞破解 推筒子二八杠单机下载 pt电子吐分规则 pk数据