从 React 迁移

优质

小牛编辑

128浏览

2023-12-01

Rax 在 DSL 层面与框架设计方面借鉴了 React 的部分思想，但是舍弃了 React 部分传统的 API，所以体积上更加轻量。Rax 推荐开发者使用函数组件（Function Component）配合 Hooks 开发，相比传统类组件（Class Components）是一种更轻量便捷的开发风格。

接下来，我们将介绍两种把现有项目从 React 迁移到 Rax 方法。

通过修改写法迁移

由于底层实现不同，所以 Rax 项目和 React 项目引入的依赖是不同的。

创建 Rax 元素

在 React 中，每个 JSX 元素都需要调用 React.createElement() 的语法糖。同样的，Rax 也需要调用 createElement ，但两者在引入上存在区别。

在 React 中：

import React from 'react';

而在 Rax 中，对应修改为：

import { createElement } from 'rax';

元素渲染

在 React 中，需要在项目入口调用 ReactDOM.render()，将 React Element 渲染到真实的 DOM 节点。Rax 与之不同的是，Rax 支持跨容器渲染，在 Rax 的项目中调用 render 方法的时候，我们需要指定对应容器使用的 Driver 。基于此，我们需要做出以下对应的修改：

在 React 中：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

在 Rax 中：

import { createElement, render } from 'rax';
import * as DriverDOM from 'driver-dom';

render(
  <h1>Hello, world!</h1>,
  document.body,
  { driver: DriverDOM }
);

通过 Webpack 配置迁移

在 Webpack 配置中，通过添加 react 和 react-dom 的 alias 来让使用 Rax 运行已有的 React 项目，这种方法不需要修改任何项目代码。

{
  // ...
  resolve: {
    alias: {
      'react': 'rax/lib/compat',
      'react-dom': 'rax-dom'
    }
  }
  // ...
}

通过工程插件迁移

如果使用的是 Rax 官方的工程，可以通过添加工程插件 rax-plugin-compat-react 的方式实现兼容，无需修改代码。详见rax-plugin-compat-react

注意事项

为了减小 Rax 的体积，让开发者更加专注与 Hooks 的开发方式，Rax 将部分 API 从 Core 中移了出来。但我们仍然可以通过引入独立包的方式使用它们，以 React.findDOMNode 为例：

在 React 中：

ReactDOM.findDOMNode(component);

在 Rax 中：

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

更多详细的 API 使用方式请参考 Rax API。