Refine项目从3.x到4.x版本迁移指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00427/article/details/148360253

Refine项目从3.x到4.x版本迁移指南

refine 一个用于构建内部工具、管理面板、仪表盘和B2B应用程序的React框架，具有无与伦比的灵活性。项目地址: https://gitcode.com/gh_mirrors/re/refine

前言

Refine作为一款优秀的React框架，在3.x版本发布一年后迎来了重大更新。4.x版本针对开发者体验和功能简化进行了全面优化，使框架更加灵活，能够适应更广泛的使用场景。本文将详细介绍从3.x迁移到4.x版本的关键变化和迁移步骤。

自动迁移工具

推荐使用@refinedev/codemod工具自动完成大部分迁移工作：

npx @refinedev/codemod@latest refine3-to-refine4

该工具会自动处理大部分破坏性变更，但有以下已知限制：

无法正确处理TypeScript的实例化表达式
无法正确处理类型声明文件(.d.ts)
可能无法正确格式化包含React片段(<>...</>)的返回语句

遇到这些问题时，需要手动修改相关文件。

手动迁移步骤

包名变更

所有@pankod前缀的包已迁移至@refinedev组织：

npm uninstall @pankod/refine-core @pankod/refine-antd
npm i @refinedev/core @refinedev/antd

核心变更点

路由系统重构

4.x版本引入了全新的路由系统，主要变化包括：

routerProvider变为可选，Refine现在可以不依赖路由使用
旧版路由提供器重命名为legacyRouterProvider
资源路由现在支持更灵活的路径定义

resources={[
    {
        name: "products",
        list: "/:tenantId/products",
        show: "/:tenantId/products/:id",
        edit: "/:tenantId/products/:id/edit",
    }
]}

资源定义优化

资源定义结构进行了简化：

resources={[
    {
        name: "products",
-       options: {
-           route: "my-products",
-           label: "My Products",
-       },
+       meta: {
+           label: "My Products",
+       }
    }
]}

认证提供器变更

旧版authProvider重命名为legacyAuthProvider：

const App = () => {
    return (
        <Refine
            legacyAuthProvider={authProvider}
        />
    );
};

使用旧版认证提供器时，需要在hooks中添加兼容标记：

const login = useLogin({
    v3LegacyAuthProviderCompatible: true,
});

数据相关变更

数据提供器参数更新

getList方法参数进行了调整：

getList: ({
    pagination: {
+        mode: "off" | "server" | "client",
    },
-    hasPagination,
+    sorters,
-    sort,
+    meta,
-    metaData,
})

常用Hooks变更

useList和useInfiniteList：
- 弃用config属性，改用独立属性
useTable：
- 弃用initialCurrent和initialPageSize，改用pagination
- 弃用sorter返回值，改用sorters
useSelect：
- 默认禁用分页，需显式设置pagination.mode