React Async 项目教程

最新推荐文章于 2024-09-14 07:43:37 发布

水珊习Gale

最新推荐文章于 2024-09-14 07:43:37 发布

阅读量269

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00631/article/details/142240052

版权

React Async 项目教程

react-async [DEPRECATED] Asynchronously fetch data for React components 项目地址: https://gitcode.com/gh_mirrors/rea/react-async

1. 项目介绍

React Async 是一个用于声明性 Promise 解析和数据获取的实用工具库。它使得处理异步 UI 状态变得简单，而无需假设数据的形状或请求的类型。React Async 由一个 React 组件和多个钩子组成，可以与 fetch、Axios 或其他数据获取库一起使用，甚至是 GraphQL。

React Async 的设计理念是尽可能接近使用它的地方解析数据，同时使用声明性语法，仅使用 JSX 和原生 Promise。这与 Redux 等系统不同，Redux 需要在更高（应用程序全局）级别配置任何数据获取或更新，使用特殊的构造（actions/reducers）。

React Async 适用于大型应用程序，具有多个或嵌套的数据依赖关系。它鼓励在组件级别按需并行加载数据，而不是在路由/页面级别批量加载数据。它完全与路由解耦，因此适用于具有动态路由模型或根本不使用路由的复杂应用程序。

2. 项目快速启动

安装

首先，使用 npm 或 yarn 安装 React Async：

npm install react-async
# 或者
yarn add react-async

基本使用

以下是一个简单的示例，展示如何在 React 组件中使用 React Async 来获取数据：

import React from 'react';
import { useAsync } from 'react-async';

const fetchUser = async ({ userId }) => {
  const res = await fetch(`https://api.example.com/users/${userId}`);
  if (!res.ok) throw new Error(res.statusText);
  return res.json();
};

const UserInfo = ({ userId }) => {
  const { data, error, isPending } = useAsync({ promiseFn: fetchUser, userId });

  if (isPending) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (data) return <div>Hello {data.name}</div>;
  return null;
};

export default UserInfo;

高级使用

React Async 还支持更复杂的场景，例如在服务器端渲染（SSR）中使用：

import React from 'react';
import { Async } from 'react-async';

const fetchUser = async ({ userId }) => {
  const res = await fetch(`https://api.example.com/users/${userId}`);
  if (!res.ok) throw new Error(res.statusText);
  return res.json();
};

const UserInfo = ({ userId }) => (
  <Async promiseFn={fetchUser} userId={userId}>
    {({ data, error, isPending }) => {
      if (isPending) return <div>Loading...</div>;
      if (error) return <div>Error: {error.message}</div>;
      if (data) return <div>Hello {data.name}</div>;
      return null;
    }}
  </Async>
);

export default UserInfo;