探索 React 19：4个可能正式发布的新 hook

本文为翻译作品，原文链接：Exploring React 19: 4 New Hooks for Practical Use

React 开发者们，准备好 React 新版本发布吧！React 团队不会发布 v18.3版本了，他们目前正在开发 React v19 版本。开发者的期待的功能中有四个新的 hook------旨在解决 React 中两个常见的痛点：数据获取和表单处理。虽然这些 hook 目前作为实验性 API 在 React 预览版本中可用，但它们预计将成为 React 19 的稳定功能，并且在最终发布之前可能会有 API 更改。

让我们深入了解这些新 hook：

1. use

use hook 是一个实验性的 React hook，允许你以类似于使用 Promise 或上下文的方式从资源（如 promise 或上下文）中读取值。

const value = use(resource);

更多详情请查看官方文档。

示例：

import * as React from 'react';
import { useState, use, Suspense } from 'react';
import { faker } from '@faker-js/faker';

export const App = () => {
  const [newsPromise, setNewsPromise] = useState(() => fetchNews());

  const handleUpdate = () => {
    fetchNews().then((news) => {
      setNewsPromise(Promise.resolve(news));
    });
  };

  return (
    <>
      <h3>
        新闻列表
        <button onClick={handleUpdate}>刷新</button>
      </h3>
      <NewsContainer newsPromise={newsPromise} />
    </>
  );
};

let news = [...new Array(4)].map(() => faker.lorem.sentence());

const fetchNews = () =>
  new Promise<string[]>((resolve) =>
    setTimeout(() => {
      news.unshift(faker.lorem.sentence());
      resolve(news);
    }, 1000)
  );

const NewsContainer = ({ newsPromise }) => (
  <Suspense fallback={<p>加载中...</p>}>
    <News newsPromise={newsPromise} />
  </Suspense>
);

const News = ({ newsPromise }) => {
  const news = use<string[]>(newsPromise);
  return (
    <ul>
      {news.map((title, index) => (
        <li key={index}>{title}</li>
      ))}
    </ul>
  );
};

这个示例展示了如何使用 use hook 进行异步数据获取，为了提高用户体验，本示例中还在请求期间用 Suspense 显示了加载状态。

2. useOptimistic

useOptimistic hook 使得在执行类似提交表单这样的操作时，能够对 UI 进行乐观更新，增强用户体验。它特别适用于在等待服务器响应时，希望对 UI 进行乐观更新的场景。

译者注：乐观更新"（Optimistic Updates）是一种前端开发中的策略，用于在没有从服务器得到响应之前，先在前端显示预期的操作结果。例如下面的例子中，前端添加购物车时，未收到后端返回时即在前端更新未已添加到购物车。这样做的目的是为了提升用户体验，使应用感觉更加快速和响应。

import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    (currentState, optimisticValue) => {
      // 合并并返回新状态与乐观值
    },
  );
}

示例：

import { useState, useOptimistic } from 'react';

const AddToCartForm = ({ id, title, addToCart, optimisticAddToCart }) => {
  const formAction = async (formData) => {
    optimisticAddToCart({ id, title });
    try {
      await addToCart(formData, title);
    } catch (e) {
      // 处理错误
    }
  };

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">加入购物车</button>
    </form>
  );
};

在这个示例中，useOptimistic hook 被用来在添加物品到购物车时乐观地更新 UI，提供了更顺滑的用户体验。

3. useFormState

useFormState hook 允许你基于表单操作的结果来更新状态。它特别适用于根据表单提交的结果显示确认或错误消息。

const [state, formAction] = useFormState(fn, initialState);

示例：

import { useState } from 'react';
import { useFormState } from 'react-dom';

const AddToCartForm = ({ id, title, addToCart }) => {
  const addToCartAction = async (prevState, formData) => {
    try {
      await addToCart(formData, title);
      return '成功添加';
    } catch (e) {
      return '添加失败：缺货';
    }
  };

  const [message, formAction] = useFormState(addToCartAction, null);

  return (
    <form action={formAction}>
      <h2>{title}</h2>
      <input type="hidden" name="itemID" value={id} />
      <button type="submit">加入购物车</button>&nbsp;
      {message}
    </form>
  );
};

这个示例展示了如何使用 useFormState hook 基于表单提交的结果来显示成功或错误消息。

4. useFormStatus

useFormStatus hook 允许你检索有关最后一次表单提交的信息，例如表单是否处于等待状态、提交的数据、使用的 HTTP 方法和动作函数。

const { pending, data, method, action } = useFormStatus();

示例：

import { useFormStatus } from 'react-dom';

const SubmitButton = () => {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending} type="submit">
      加入购物车
    </button>
  );
};

在这个示例中，useFormStatus hook 被用来在表单处于提交等待状态时禁用提交按钮，为用户提供一个视觉指示。

总结

React 19 中这些新的 hook 为处理数据获取和表单交互带来了全新的开发体验，提供了更多的灵活性和改善的用户体验。由于这些是实验性 API，开发者被鼓励在 React 19 的最终发布前，随时关注官方 React 文档中的变更。