Refine 通用概念指南：Headless 架构、Provider 体系与 Hook 驱动的状态管理

Refine 通用概念指南：Headless 架构、Provider 体系与 Hook 驱动的状态管理

【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine

本篇指南以 Refine v5 官方文档的General Concepts章节（documentation/docs/guides-concepts/general-concepts/index.md）为骨架，结合仓库内packages/core的真实源码与上下文实现，系统讲解 Refine 的 Headless 设计、Resource、Provider、Hook、meta与状态管理六大核心概念。读完本文，你将理解 Refine 如何通过可插拔的 Provider 与统一的 Headless Hooks 构建内部工具、管理后台与 B2B 应用，并能独立编写自己的 Data / Auth / Access Control 等 Provider，掌握查询缓存、失效与乐观更新的底层机制。

Headless 概念：业务逻辑与 UI 彻底解耦

Refine 的核心设计理念是Headless（无头）。它不是一个"开箱即用"的样式组件库，而是提供了一整套hooks、components与providers的集合。由于业务逻辑与 UI 完全解耦，开发者可以不受任何约束地定制界面：

• 可以配合 TailwindCSS 等流行 CSS 框架，或完全从零编写自己的样式；
• 也可以直接使用官方提供的Ant Design、Material UI、Mantine、Chakra UI四种 UI 集成，这些库本质上是与无头核心包@refinedev/core深度集成的组件集合，帮助你快速起步。

这种架构带来的直接收益是：无论你选择哪种 UI 库，甚至是自研设计体系，数据获取、权限控制、i18n 等业务能力都保持不变——这正是 Hook 概念中"统一接口"的基础。

Resource 概念：应用的实体抽象

在 Refine 中，resource（资源）是一个中心概念，代表一个entity（实体），将应用的各个层面串联起来。它通常指一个数据实体，如products、blogPosts、orders。

通过 resource 定义，你可以用结构化的方式管理应用，将复杂操作通过各类providers与UI 集成抽象为更简单的动作。一个典型的 resource 定义如下：

import { Refine } from "@refinedev/core"; export const App = () => { return ( <Refine resources={[ { name: "products", list: "/my-products", show: "/my-products/:id", edit: "/my-products/:id/edit", create: "/my-products/new", }, ]} > {/* ... */} </Refine> ); };

name是资源的标识符（例如对应后端的表名或集合名），list、show、edit、create则将该资源映射到具体的路由。UI 集成的侧边栏菜单、面包屑、CRUD 按钮都会依据这些定义自动生成。

Provider 概念：可插拔的构建块

Provider 是 Refine 的构建块，用于管理应用的不同方面，如数据获取、路由、访问控制等。它们是可插拔（pluggable）的——既可以使用内置 Provider，也可以创建自己的实现，从而按需定制应用行为。在源码层面，这些 Provider 全部作为可选属性挂载在<Refine />组件上，见 packages/core/src/contexts/refine/types.ts（其中声明了dataProvider、authProvider、liveProvider、notificationProvider、accessControlProvider、auditLogProvider、i18nProvider、routerProvider等字段），并在 packages/core/src/contexts/refine/index.tsx 中向下层 Context 传递。

各 Provider 职责总览：

Provider	职责
Data Provider	与后端数据源通信，处理获取、创建、更新、删除记录，以及缓存与失效
Authentication Provider	管理用户认证与授权流程，处理重定向与错误场景
Access Control Provider	处理授权与访问控制，用于隐藏/禁用按钮和菜单项，或保护路由与组件
Notification Provider	启用通知功能，如在操作成功或出错后展示通知
I18n Provider	启用国际化，渲染翻译后的菜单项、按钮文本、表格列、页面标题等
Live Provider	启用实时更新，例如某用户创建新记录后，其他用户的列表页无需刷新即可看到
Router Provider	将路由匹配到资源，支持面包屑、CRUD 操作后的自动重定向、渲染菜单项等导航能力
Audit Log Provider	为 CRUD 操作发送审计日志

Hook 概念：统一且无头的接口

Refine 采用Hook 驱动的架构，这是 React 开发中现代且高效的模式，显著提升了开发体验与应用性能。所有 Hooks 都是headless的：它们与具体库无关，为你的需求提供统一接口，无论你选择哪种路由或 UI 库。

最典型的例子是路由：Refine 针对React Router、Next.js、Remix、Expo提供了不同的内置 router provider，但导出自@refinedev/core的单个useGoHook却可以在任何路由方案下导航到指定资源的页面（实现见 packages/core/src/hooks/router/use-go/index.tsx）。

同样地：

• 无论你使用 Casbin 还是 Cerbos 做授权，都有统一的useCanHook 控制组件访问权限；
• 无论你偏好next-i18next还是react-i18next，都有统一的useTranslateHook 处理翻译。

数据获取、认证、访问控制、通知、i18n 等领域都遵循这一"一套 Hook、多种实现"的模式。

Provider 详解：从接口到源码

Data Provider

Data Provider 是前端与后端数据源之间的桥梁，负责所有数据相关操作（获取、缓存、创建、更新、删除）。每个数据操作通常关联特定 resource——例如获取products资源的数据时，Data Provider 知道该请求哪个端点、如何处理响应：

import { DataProvider } from "@refinedev/core"; const myDataProvider: DataProvider = { getOne: async ({ resource, id }) => { const response = await fetch( `https://example.com/api/v1/${resource}/${id}`, ); const data = await response.json(); return { data }; }, // other methods... };

Refine 为 REST、Strapi、AirTable、Supabase、GraphQL 等主流数据源提供了多种内置 Data Provider，完整列表见 Data Providers 文档。

Hooks

组件中可使用useList、useOne、useCreate、useEdit、useShow等 Hooks 获取数据。以useOne为例（实现位于 packages/core/src/hooks/data/useOne.ts，useList见 packages/core/src/hooks/data/useList.ts）：

import { useOne } from "@refinedev/core"; export const MyPage = () => { const { result, query: { isLoading }, } = useOne({ resource: "products", id: 1 }); if (isLoading) { return <>Loading...</>; } return <>{result?.name}</>; };

注意返回值同时暴露了result（数据结果）与query（TanStack Query 对象，含isLoading等状态），这正是 Refine 将 React Query 深度整合进 Hook 接口的体现。

Authentication Provider

Authentication Provider 集中管理 Refine 应用中的认证与授权流程，包括登录、登出、重定向、错误处理等：

import { AuthProvider } from "@refinedev/core'"; export const authProvider: AuthProvider = { login: async ({ email, password }) => { const { status } = handleLogin(email, password); if (status === 200) { return { success: true, redirectTo: "/dashboard" }; } else { return { success: false, error: { name: "Login Error", message: "Invalid credentials" }, }; } }, check: async (params) => ({}), logout: async (params) => ({}), onError: async (params) => ({}), register: async (params) => ({}), forgotPassword: async (params) => ({}), updatePassword: async (params) => ({}), getPermissions: async (params) => ({}), getIdentity: async (params) => ({}), };

login方法返回{ success, redirectTo }或{ success: false, error }，由 Refine 统一处理后续的重定向与错误提示。完整的认证方法集（useLogin、useLogout、useRegister、useGetIdentity等）可在 packages/core/src/hooks/auth/ 中查看。

Components

使用@refinedev/core导出的Authenticated组件即可用认证保护你的路由与组件：

import { Authenticated } from "@refinedev/core"; const MyPage = () => ( <Authenticated> // Only authenticated users can see this. <MyComponent /> </Authenticated> );

Hooks

使用useGetIdentity获取当前用户信息：

import { useGetIdentity } from "@refinedev/core"; export const DashboardPage = () => { const { data: { name }, } = useGetIdentity(); return <>Welcome {name}!</>; };

UI Integrations

各 UI 集成提供与 Auth Provider 开箱即用的预构建组件：提供 Auth Provider 后，其Layout 组件会自动在头部渲染当前用户信息，并在合适的位置添加登出按钮；同时可以使用这些集成的AuthPage组件快速搭建Login、Register、Forgot Password、Reset Password页面（参见下文 Auth Pages 与 Authentication 指南）。

Access Control Provider

Access Control Provider 基于用户权限决定其能访问或执行的操作。它利用 resource 定义来判断访问权限——例如根据products资源的定义决定用户能否编辑或删除该资源的记录：

import { AccessControlProvider, Refine } from "@refinedev/core"; const myAccessControlProvider: AccessControlProvider = { can: async ({ resource, action }) => { if (resource === "users" && action === "block") { return { can: false }; } return { can: true }; }, }; export const App = () => { return ( <Refine accessControlProvider={myAccessControlProvider}>{/* ... */}</Refine> ); };

Components

用CanAccess组件包裹应用中需要控制访问的部分：

import { CanAccess } from "@refinedev/core"; export const MyPage = () => { return ( <CanAccess resource="users" action="show" params={{ id: 1 }}> <> My Page <CanAccess resource="users" action="block" params={{ id: 1 }} fallback={"You are not authorized."} > // Only authorized users can see this button. <BlockUserButton /> </CanAccess> </> </CanAccess> ); };

Hooks

使用useCanHook 在组件内控制访问（实现见 packages/core/src/hooks/accessControl/useCan/index.ts）：

import { ErrorComponent, useCan } from "@refinedev/core"; export const MyPage = () => { const { data: show } = useCan({ resource: "users", action: "show", params: { id: 1 }, }); const { data: block } = useCan({ resource: "users", action: "block", params: { id: 1 }, }); if (!show?.can) { return <ErrorComponent />; } return ( <> My Page {block?.can && <BlockUserButton />} {!block?.can && "You are not authorized."} </> ); };

UI Integrations

提供 Access Control Provider 后，UI 集成会自动生效：例如用户无权查看orders资源时，侧边栏菜单会自动隐藏该项；当前用户无权删除某商品时，删除按钮会自动禁用或隐藏：

import { DeleteButton } from "@refinedev/antd"; // or @refinedev/mui, @refinedev/chakra-ui, @refinedev/mantine export const MyPage = () => { return ( <> My Page {/* Only authorized users can see this button. */} <DeleteButton resource="users" recordItemId={1} /> </> ); };

这一机制同样作用于CreateButton、EditButton、ShowButton、ListButton等所有按钮。

Notification Provider

Refine 可以为 CRUD 操作与错误自动展示通知——例如创建、更新、删除products资源后，或表单提交出错时。它内置了Ant Design、Material UI、Chakra UI、Mantine等主流 UI 库的通知 Provider。

Hooks

数据 Hooks、mutation Hooks、auth Hooks会自动为操作与错误展示通知，并且支持按 Hook 自定义这些通知：

import { useDelete } from "@refinedev/core"; export const MyPage = () => { const { mutate } = useDelete(); return ( <Button onClick={() => { mutate({ resource: "products", id: 1, successNotification: () => ({ message: "Product Deleted", description: "Product has been deleted successfully.", type: "success", }), errorNotification: () => ({ message: "Product Delete Error", description: "An error occurred while deleting the product.", type: "error", }), }); }} > Delete Product </Button> ); };

对于未被覆盖的场景，可以使用useNotificationHook 主动展示通知（其open支持success | error | progress三种类型，相关实现见 packages/core/src/hooks/notification/）：

import { useNotification } from "@refinedev/core"; export const MyPage = () => { const { open, close } = useNotification(); return ( <> <Button onClick={() => { open?.({ key: "my-notification", message: "Test Notification", description: "This is a test notification.", type: "success", // success | error | progress }); }} > Show notification </Button> <Button onClick={() => { close?.("my-notification"); }} > Close Notification </Button> </> ); };

I18n Provider

I18n Provider 集中管理 Refine 应用中的本地化流程：

import { Refine, I18nProvider } from "@refinedev/core"; const i18nProvider: I18nProvider = { translate: (key: string, options?: any, defaultMessage?: string) => string, changeLocale: (lang: string, options?: any) => Promise, getLocale: () => string, }; export const App = () => { return ( <Refine i18nProvider={i18nProvider} {/* ...*/}> {/* ... */} </Refine> ) }

Hooks

使用useTranslate、useSetLocale、useGetLocale三个 Hooks 在组件中处理 i18n（实现分别位于 packages/core/src/hooks/i18n/useTranslate.ts、packages/core/src/hooks/i18n/useSetLocale.ts、packages/core/src/hooks/i18n/useGetLocale.ts）：

import { useTranslate, useSetLocale, useGetLocale } from "@refinedev/core"; export const MyPage = () => { const translate = useTranslate(); const setLocale = useSetLocale(); const getLocale = useGetLocale(); return ( <> Current Locale: {getLocale()} <Button onClick={() => setLocale("en")}>Set Locale to English</Button> <Button onClick={() => setLocale("de")}>Set Locale to German</Button> <Button>{translate("Hello")</Button> </> ); };

UI Integrations

提供 I18n Provider 后，UI 集成会自动翻译菜单项、按钮文本、表格列、页面标题等内容。

Router Provider

Router Provider 帮助 Refine 理解资源与路由之间的关系，启用面包屑、CRUD 操作后的自动重定向、菜单项渲染、Hook 参数推断等导航能力。内置的路由集成包括：

• React Router
• Next.js
• Remix
• Expo Router (React Native)

Components

UI Integration组件可以从当前 URL 推断资源信息。例如，我们在products资源的列表页（使用List布局组件），添加一个CreateButton来跳转到该资源的创建页——有了 router provider，当前资源信息会从 URL 自动推断：

import { List, CreateButton } from "@refinedev/antd"; // or @refinedev/mui, @refinedev/chakra-ui, @refinedev/mantine export const ProductsListPage = () => { return ( // Instead of <List resource="products"> <List> {/* Instead of <CreateButton resource="products" /> */} <CreateButton /> // Redirects to /products/new </List> ); };

Hooks

Refine Hooks 可以从当前 URL 同步resource、id、action参数，无需手动传入。例如useShow能自动推断resource和id：

import { useShow } from "@refinedev/core"; export const ShowPage = () => { const { result: product, query: { isLoading }, // useShow({ resource: "products", id: 1 }); // We don't need to pass "resource" and "id" parameters manually. } = useShow(); if (isLoading) { return <>Loading...</>; } return <>{product?.name}</>; };

另一个例子是useTableHook：它既能从当前路由推断resource、pagination、filters、sorters参数，也会在这些参数变化时更新当前路由（syncWithLocation行为）。

Audit Log Provider

Audit Log Provider 集中管理 Refine 应用中的审计日志获取，可用于展示资源的变更历史：

import { AuditLogProvider, Refine } from "@refinedev/core"; const auditLogProvider: AuditLogProvider = { get: async (params) => { const { resource, meta, action, author } = params; const response = await fetch( `https://example.com/api/audit-logs/${resource}/${meta.id}`, { method: "GET", }, ); const data = await response.json(); return data; }, }; export const App = () => { return <Refine auditLogProvider={auditLogProvider}>{/* ... */}</Refine>; };

Hooks

使用useLogListHook 在组件中获取资源的审计日志，它在底层调用AuditLogProvider的get方法：

import { useLogList } from "@refinedev/core"; const productsAuditLogResults = useLogList({ resource: "products", });

UI Integrations：无头核心之上的界面层

Refine 自身是无头的，但为流行 UI 库提供了集成包：

• Ant Design（介绍文档）
• Material UI（介绍文档）
• Chakra UI（介绍文档）
• Mantine（介绍文档）

这些集成在底层使用@refinedev/core，充当 UI 库与 Refine 框架之间的桥梁。仓库中对应的集成实现分别位于 packages/antd、packages/mui、packages/chakra-ui、packages/mantine。

Forms

Refine 提供一组处理表单状态、校验、提交、自动保存等能力的 Hooks，并能无缝衔接主流 UI 库的表单组件：

• React Hook Form
• Ant Design Form
• Mantine Form

Tables

Refine 与多个流行 UI 库的表格组件无缝集成，简化分页、排序、过滤等特性的使用：

• TanStack Table
• Ant Design Table
• Material UI DataGrid

更完整的表格玩法可参考 Tables 指南。

Layout

UI 集成提供Layout 组件，负责渲染应用的侧边栏菜单、头部与内容区。它会基于resource 定义自动渲染侧边栏菜单，并基于当前用户渲染头部信息。

CRUD Pages

List、Create、Edit、Show组件基于资源信息自动提供布局视图，包括：

• 带标题的页头（Header）
• 面包屑（Breadcrumb）
• 翻译后的文本
• CRUD 按钮

在此基础上，Refine 还为这些布局附加了能力：

• 访问控制：若当前用户无权创建商品，创建按钮会自动禁用或隐藏；
• 翻译：按钮、标题、列会翻译为用户的当前语言。

Buttons

例如 UI 集成导出的CreateButton，用于将用户重定向到资源的创建页。按钮本身虽来自底层 UI 包，但 Refine 为其附加了能力：

• 路由：点击按钮后跳转到资源的创建页；
• 访问控制：若当前用户无权操作，按钮会自动禁用或隐藏；
• 翻译：按钮文本会翻译为用户的当前语言。

Auth Pages

Login、Register、Forgot Password、Reset Password等通用认证页面会自动与AuthProvider集成，支持 Headless 与四种 UI 集成形态，相关实战示例可参考 examples/auth-antd/、examples/auth-material-ui/ 等目录。

UI Integration Hooks

UI 集成 Hooks 在底层使用@refinedev/core的 Hooks，使其更易用于 UI 特定的组件中。例如@refinedev/antd包的useTableHook，底层使用@refinedev/core的useTable，但返回与 Ant DesignTable组件兼容的 props——无需手动映射属性。

Meta 概念：跨层传递附加信息

meta是一个特殊属性，用于向providers与UI Integrations提供额外信息。它有3 种填充来源，最终会被合并为单一的meta属性并传递给 providers 与 UI 集成：

1. 来自 resource：在<Refine resources={...}>定义中声明：

import { Refine } from "@refinedev/core"; export const App = () => { return ( <Refine resources={[ { name: "products", list: "/my-products", meta: { fromResource: "Hello from resource.meta", }, }, ]} > {/* ... */} </Refine> ); };

2. 来自 Hook：在调用 Hook 时传入：

import { useShow } from "@refinedev/core"; export const ShowPage = () => { const { query: { data, isLoading }, /* or use useOne */ } = useShow({ resource: "posts", id: "1", meta: { fromHook: "Hello from hook.meta", }, }); };

3. 来自 URL：通过 URL 查询参数传递：

https://example.com/products?fromURL=Hello%20from%20URL

合并后，三个来源的 meta 字段会在 Provider 中同时可见：

import { AccessControlProvider, DataProvider } from "@refinedev/core"; export const myDataProvider = { getOne: async ({ meta }) => { console.log(meta.fromResource); // "Hello from resource.meta" console.log(meta.fromHook); // "Hello from hook.meta" console.log(meta.fromURL); // "Hello from URL" }, }; export const myAccessControlProvider = { can: async ({ meta }) => { console.log(meta.fromResource); // "Hello from resource.meta" console.log(meta.fromHook); // "Hello from hook.meta" console.log(meta.fromURL); // "Hello from URL" }, };

典型应用场景

• 全局过滤器：向 data provider 传递一个过滤器；
• 多租户：将当前租户 ID 提供给 providers；
• 高级访问控制：按资源进行访问控制配置；
• UI 定制：按资源管理侧边栏标签与图标。

需要注意的是，meta 会影响查询键的生成——下文状态管理部分会说明，Refine 将 meta 属性视为 key 的一部分，会依据 meta 内容区分查询（相关 Context 见 packages/core/src/contexts/metaContext/）。

状态管理：基于 React Query 的结构化键体系

Refine 使用React Query处理数据获取与缓存，提升应用性能与用户体验，高效地实现服务器与 UI 之间的数据同步、后台更新、缓存管理与数据失效。

数据获取、缓存管理与去重

Refine 使用结构化键（structured keys）来标识并缓存查询与变更的服务器响应，可复用时复用缓存数据以优化性能。可组合的结构化键还支持查询自动去重：同一查询被多处调用时，只发出一次请求，并在所有订阅者间共享结果。

默认配置下，Refine 的查询缓存时间为 5 分钟、过期（stale）时间为 0 秒：

• 查询在 5 分钟内被再次使用，会先用缓存数据填充，同时在后台重新获取；
• 超过 5 分钟未复用，则立即重新获取。

失效与重新获取

基于结构化键的状态管理也帮助在 mutation 发生时自动失效相关查询。例如用户创建一条新记录后，Refine 会自动使相关查询失效，保证用户看到的数据始终与后端一致。

默认行为是：所有相关查询都会失效，但只有当前正在使用的查询才会重新获取——如果用户不在某资源的列表页，该列表查询不会被重新获取，只被标记为失效，待用户导航到列表页时再拉取最新数据。失效与重新获取行为可以通过 mutation 的invalidates属性自定义，或在<Refine />组件上全局配置（参见 Forms 指南的 Invalidation 章节）。

乐观更新与回滚

为用户提供即时反馈至关重要，Refine 通过乐观更新（optimistic updates）实现：mutation 发生时，自动用新数据更新相关查询，用户立即看到变化；若 mutation 失败，则自动回滚更改并重新获取相关查询。

Refine 提供 3 种mutation mode：pessimistic（悲观）、optimistic（乐观）、undoable（可撤销）。乐观更新会在optimistic与undoable模式下执行；undoable模式还会通过通知让用户在指定时间内撤销更改。

默认的乐观更新行为：

• Updatemutation：对目标资源的列表（list）、many 与详情（detail）查询执行乐观更新；
• Createmutation：对目标资源的列表与 many 查询执行乐观更新；
• Deletemutation：对目标资源的列表与 many 查询执行乐观更新。

可以通过 Hooks 的optimisticUpdateMap与mutationMode属性定制，或通过<Refine />组件全局配置（更多细节见 Forms 指南的 Optimistic Updates 章节）。

键结构（Key Structure）

键用于标识并缓存查询与变更的服务器响应。Refine 采用可重组的结构化键格式：使用相同参数重新组合即可得到相同键，从而让开发者完全掌控应用的缓存与失效行为。所有查询缓存与变更都可以通过这些键进行跟踪和管理。

@refinedev/core暴露了keys方法用于生成查询与变更的键；如果需要对缓存做高级操作，可以用它生成键并获取对应的查询或变更缓存。

键的结构化层级（从通用到具体）：

1. 最外层：操作类型信息，可为"auth"、"data"、"audit"或"access"；
2. 若是"data"类型，下一层包含其使用的 data provider 信息；
3. 再下一层包含其操作的 resource 信息；
4. 资源信息之后，下一层是操作类型，可为"list"、"infinite"、"many"、"one"；
5. 最后一层是操作参数（可为"filters"、"sorters"、"pagination"、"id"等）以及meta属性的内容；
6. 注意：Refine 将meta属性视为键的一部分，并依据meta属性区分查询。

例如，带filters的products资源列表查询的键生成如下：

import { useList, keys } from "@refinedev/core"; const Component = () => { const response = useList({ resource: "products", filters: [ { field: "title", operator: "contains", value: "test", }, ], }); // This key will be generated by useList and used to identify the query and cache the response. const generatedKey = keys() .data("default") // Name of the data provider .resource("products") // Identifier of the resource .action("list") // Type of the operation .params({ filters: [{ field: "title", operator: "contains", value: "test" }], }) // Parameters of the operation .get(); console.log(generatedKey); // ^ ["data", "default", "products", "list", { filters: [{ field: "title", operator: "contains", value: "test" }] }] };

这套键结构让缓存管理与失效行为高度可预测、可追踪，是 Refine 状态管理的基石。

开发者体验：CLI、Devtools 与 Inferencer

CLI

Refine CLI 允许你与 Refine 项目交互并执行特定任务，例如创建新资源、管理版本更新、swizzle 组件、运行项目（build、start、dev）。CLI 包实现位于 packages/cli，更多用法见 Packages 文档。

Devtools

Refine Devtools旨在帮助你调试和开发 Refine 应用，功能集包括：监控查询与变更、测试 inferencer 生成的代码、从 UI 中添加和更新 Refine 包等。相关实现见 packages/devtools 及其配套的 packages/devtools-server、packages/devtools-ui 等包。

Inferencer

@refinedev/inferencer是一个根据 API 响应自动生成基础样板代码的包，作为节省时间的起点。需要注意的是，它并非对所有场景都可靠，且不适用于生产环境。

例如，以下代码即可脚手架出完整的 CRUD 页面：

import { AntdInferencer } from "@refinedev/inferencer/antd"; // or @refinedev/inferencer/mui, @refinedev/inferencer/chakra, @refinedev/inferencer/mantine, @refinedev/inferencer/headless export const ProductList = () => { // Scaffolds List page. return <AntdInferencer />; }; export const ProductShow = () => { // Scaffolds Show page. return <AntdInferencer />; }; export const ProductEdit = () => { // Scaffolds Edit page with form. return <AntdInferencer />; }; export const ProductCreate = () => { // Scaffolds Create page with form. return <AntdInferencer />; };

一个由 inferencer 生成的List Page示例（基于 Ant Design）：

import { List, ShowButton, useTable } from "@refinedev/antd"; import { BaseRecord } from "@refinedev/core"; import { Space, Table } from "antd"; import React from "react"; export const ProductList = () => { const { tableProps } = useTable({ syncWithLocation: true, }); return ( <List> <Table {...tableProps} rowKey="id"> <Table.Column dataIndex="id" title="Id" /> <Table.Column dataIndex="name" title="Name" /> <Table.Column dataIndex="price" title="Price" /> <Table.Column title="Actions" dataIndex="actions" render={(_, record: BaseRecord) => ( <Space> <ShowButton hideText size="small" recordItemId={record.id} /> </Space> )} /> </Table> </List> ); };

可以看到，生成代码直接使用了useTable（含syncWithLocation路由同步）、List布局与ShowButton，可作为真实业务代码的起点，再按需调整。Inferencer 各 UI 形态的实现见 packages/inferencer，实战示例可参考 examples/inferencer-antd/、examples/inferencer-headless/ 等目录。

小结

Refine 的通用概念可以归纳为一条清晰的主线：Headless 架构保证业务逻辑与 UI 解耦；Resource将数据实体、路由与操作结构化；Provider以可插拔方式注入数据、认证、权限、通知、i18n、实时、路由与审计能力；Hook为所有这些能力提供跨库统一的接口；meta打通资源、Hook 与 URL 之间的信息传递；而基于 React Query 的结构化键状态管理，则让缓存、去重、失效与乐观更新变得可预测、可掌控。无论是从零开始还是借助 CLI、Devtools 与 Inferencer 加速开发，这六大概念都是深入理解与高效使用 Refine 的钥匙。

【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine