React 新功能 - &#use&# 钩子

React 19（RC 版本 - 截至 2024 年 9 月）是流行 Web 开发库的最新版本。
V19 是一个重要的里程碑，带来了许多新功能和新功能。这篇文章将讨论其中一个钩子，即 use 钩子。

使用钩子

该钩子允许开发者通过暂停接收到的 Promise 来暂停 UI 组件的渲染，直到异步任务（例如获取数据或加载资源）完成，而无需复杂的状态管理。

获取数据示例

我们有一个简单的组件，它使用经典方法 useEffect 挂钩，并从模拟 API 获取数据（我正在使用 MSW）。
我们管理用于存储数据的本地状态，以及 isLoading 和 isError 获取状态：

const [users, setUsers] = useState<any>(null);
const [isError, setIsError] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);

当页面首次加载时，我们运行此 useEffect 挂钩来获取数据、存储数据并更新各种状态：

const fetchData = async () => {
  const response = await fetch('/api/users');
  return response.json();
};


useEffect(() => {
  fetchData()
    .then(setUsers)
    .catch(() => setIsError(true))
    .finally(() => setIsLoading(false));
}, []);

我们在处理请求时或遇到错误时显示一些 UI：

if (isLoading) {
  return <h2>Loading...</h2>;
}
if (isError) {
  return <h2>Error</h2>;
}

终于！我们渲染用户列表：

return (
  <>
    {users.map((user) => {
      return (
        <div>
          {user.lastName}, {user.firstName}
        </div>
      );
    })}
  </>
);

大量样板代码！

现在，让我们重构一下！

让我们删除 useState 和 useEffect 挂钩。我们将保持 fetchData 方法不变。
现在我们将使用新的 use 钩子获取数据，该钩子接受一个承诺并返回 JSON 数据或错误：

const users = use(fetchData());

这个钩子的工作方式类似于这样做：

const users = await fetchData();

处理 isLoading 和 isError

为了处理这些状态更改，我们将转到我们的 App 组件。我们将使用 React Suspense 组件，该组件旨在响应异步事件。它会显示后备 UI，直到其子级完成加载。

对于使用 Suspense 时的错误处理，通常的做法是使用 ErrorBoundary。我们将添加一个 ErrorBoundary 组件来实现 React 的 getDerivedStateFromError() 方法。

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList />
  </Suspense>
</ErrorBoundary>

一些额外的

钩子的通常规则在这里不适用——你可以在任何你想要的地方使用这个钩子！

与常规钩子不同，use 钩子可以有条件地与 if 语句一起使用，允许您决定是否触发它。例如，如果您想使用功能标志包装新的 API 请求并将其切换以进行测试，只需将功能标志传递给 UserList 组件并包装 use 挂钩即可。就这么简单！

现在，修改App组件：

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList testNewApi={true} />
  </Suspense>
</ErrorBoundary>

修改UserList组件：

let users = [];
if(testNewApi){
  user = use(fetchData());
}

您还可以使用此钩子来获取 Context 对象，而不是使用常规方法：

const data = useContext(myContext);

您可以在此处使用 use 挂钩，例如，如果您想根据条件语句检索上下文。

结论

在本文中，我概述了 use 挂钩的语法并提供了用法示例。这应该可以帮助您掌握这些钩子以及如何有效地实施它们。我希望您发现这些信息对您未来的项目有益。

以上是React 新功能 - &#use&# 钩子的详细内容。更多信息请关注PHP中文网其他相关文章！