怎么说呢，

欢迎大家 进群 与他探讨 React 最新趋势。并持续追踪全球前端领域的最新动态！

再看原文地址。React’s use API is about to make useContext obsolete

多年来React 开发者习惯使用 useContext 在全局共享状态，而不用把 props 一层层传递下去。虽然这种方式可行，但即将到来的 use API 带来了更强大的能力。远远超越了单纯读取 context 的功能。说起来，

通过 use你不仅能做到 useContext 可以做到的一切。还能直接在组件中无缝处理异步数据，比如 API 调用或 Promise。这代表着更统一的写法、更干净的代码，还有一种全新的状态管理和数据获取思路。老实说，

在这篇文章结束时你将清楚理解 use API 如何调整现代 React 中的状态管理和数据获取方式。

前置条件

在继续之前，你需要准备：

• 已在本地安装 Node.js v24
• React v19

项目初始化

我们用 Vite 来初始化一个 React 项目。打开终端并运行：

npm create vite@latest my-project

接着进入项目目录：

cd my-project

接下来启动开发服务器：

npm run dev

这篇文章示例会使用 Tailwind CSS 来做样式。

在 use 之前

在 React 的新 use API 出现之前。若要从 API 获取数据，你需要导入并使用三个 Hook，例如：

const = useState;const = useState;const = useState;

这种写法显得冗长：你需要同时管理三个状态变量，并结合 useEffect 来触发请求。例如：

import React,{ useState,useEffect } from 'react';function DataFetcher { const = useState;const = useState;const = useState;
useEffect => { const fetchData = async => { try { const response = await fetch;if { throw new Error;} const result = await response.json;setData，} catch { setError;} finally { setLoading;} }，fetchData;},)，if { return 

加载中...
} if { return 

从错误来看，{error.message}
} return;}

这个组件通过useEffect 拉取API数据，并用useState 管理状态。按理说，它初始化了三个状态：data 存放结果。loading 表示加载状态，error 捕获请求错误。当组件挂载时会触发异步函数请求数据，成功则存入data 失败则存入error 。

使用 use

接下来看use 的场景。使用use 你不再需要手动管理这三个状态，也不需要useEffect 来触发请求。怎么说呢，

const value = use;

建立 Demo 应用

我们来实际体验一下use 的威力。

设置 API 调用 在src 文件夹中创建api.js ,粘贴如下代码：

 let usersPromise;async function fetchUsers { const response = await fetch;if { throw new Error;} return response . json;} export function getUsersPromise { if { usersPromise = fetchUsers;} return usersPromise;话说回来，}