NPM

npm install --save @data-client/react @data-client/test @data-client/rest

Yarn

yarn add @data-client/react @data-client/test @data-client/rest

pnpm

pnpm add @data-client/react @data-client/test @data-client/rest

esm.sh

<script type="importmap">
{
  "imports": {
    "@data-client/react": "https://esm.sh/@data-client/react",
    "@data-client/test": "https://esm.sh/@data-client/test",
    "@data-client/rest": "https://esm.sh/@data-client/rest"
  }
}
</script>

使用 Agent Skills

更想让 AI 智能体帮你搭建？请查看 Agent Skills 并运行 /data-client-setup。

在顶层组件中添加 provider

Web

index.tsx

import { DataProvider } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.body).render(
  <DataProvider>
    <App />
  </DataProvider>,
);

或者，将状态与 redux 集成

React Native

index.tsx

import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';
import App from './App';

const Root = () => (
  <DataProvider>
    <App />
  </DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

或者，将状态与 redux 集成

NextJS

完整的 NextJS 指南

app/layout.tsx

import { DataProvider } from '@data-client/react/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DataProvider>{children}</DataProvider>
      </body>
    </html>
  );
}

Expo

app/_layout.tsx

import { Stack } from 'expo-router';
import { DataProvider } from '@data-client/react';

export default function RootLayout() {
  return (
    <DataProvider>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </DataProvider>
  );
}

Anansi

Anansi（beta）是一个完全可组合的 React 开发框架，可选支持服务端渲染。

bash

npx @anansi/cli hatch my-project

Anansi 已自动集成 Reactive Data Client。

下一步：定义数据 »

示例

探索 todo-app 示例

在 StackBlitz 中打开查看源码

正在加载演示…

更多演示

支持的工具

TypeScript 4.0+

TypeScript 是可选的，但要获得完整的类型约束，至少需要 4.0 版本并开启 strictNullChecks。

旧版浏览器支持

如果你的应用面向较旧的浏览器（几年甚至更久之前的），请务必加载 polyfill。通常的做法是使用 @babel/preset-env useBuiltIns: 'entry'，并在应用入口处导入 core-js。

这样可以确保应用的打包产物中只包含目标浏览器所需的 polyfill。

例如 TypeError: Object.hasOwn is not a function

Internet Explorer 支持

如果你看到 Uncaught TypeError: Class constructor Resource cannot be invoked without 'new'，请按照说明为包添加旧版浏览器支持

ReactJS 16-19 与 React Native

支持 ReactJS 16.2 及以上版本（也就是带 hook 的版本！）。React 18 提供了更完善的 Suspense 支持和特性。React Native、React Navigation 和 Expo 均受支持。

如果你有一个结合其他 React 库正常运行的项目，欢迎在我们的讨论区与大家分享。