从 Rax 0.x 升级

优质

小牛编辑

122浏览

2023-12-01

从 Rax 0.x 升级为 Rax 1.x，需要注意以下事项：

render 变更

import { createElement, render } from 'rax';
import UniversalDriver from 'driver-universal';
...
// 需在 render 方法中指定 Driver 进行渲染
render(<App />, document.body, { driver: UniversalDriver });

style 变更

style 不再内置支持数组格式

<View style={[a, b, c]}>
// 需替换为
<View style={{...a, ...b, ...c}}>
// 或者
<View style={Object.assign({}, a, b, c)}>

能力升级

您可以继续使用类组件（Class Component），同样也可以使用具有 Hooks API 的函数组件（Function Component）。

使用可参考 Hooks。

核心 API 变更

为了减小 Rax 的体积，让开发者更加专注与 Hooks 的开发方式。Rax 将部分 API 从 Core 中移了出来。这并非代表功能的缺失，我们仍然可以通过引入独立包的方式使用它们。

比如 findDOMNode：

import findDOMNode from 'rax-find-dom-node';
findDOMNode(component);

我们移除的 API 如下，更多详细使用方式请参考《API 参考》

包名	说明
rax-children	获取 Children 节点
rax-proptypes	props 验证器
rax-is-valid-element	验证对象是否为 Rax 元素
rax-clone-element	克隆并返回新的 Rax 元素
rax-create-factory	返回用于生成指定类型 Rax 元素的函数
rax-create-portal	将子元素渲染到 DOM 组件层次结构之外的 DOM 节点中
rax-hydrate	渲染内容时保留已有 DOM 结构，并补充事件绑定
rax-find-dom-node	访问真实 DOM 节点
rax-unmount-component-at-node	从 DOM 中移除已装载的 Rax 组件
rax-set-native-props	直接更改原生组件的属性件

样式单位变更

不在对 rem 单位相对 750 进行计算处理，同时新增 rpx 单位代替原先的 rem

<View style={{ width: '300rem' }}>
// 需替换为
<View style={{ width: '300rpx' }}>

lineHeight 与 w3c 标准对齐，不在默认按 750 相对单位计算

<View style={{ lineHeight: 30}}>
// 需替换为
<View style={{ lineHeight: '30rpx' }}>

组件废弃

rax-touchable 废弃

<Touchable style={...} onPress={...}></Touchable>
// 需替换为
<View style={...} onClick={...}></View>

rax-picker, rax-button, rax-switch 废弃，@rax-ui 库会替代这些