React 19 全览，新特性进行一次深度的体验学习

Jwc28资讯网——每日最新资讯28at.com

最近 React 发布了 V19 RC 版本，按照惯例，我们对 React 19 的新特性进行一次深度的体验学习，以便尽快上手新特性。Jwc28资讯网——每日最新资讯28at.com

这篇文章，我会通过丰富的示例，演示 React 19 的新特性，以及相较于老版本的差异。同时会附上自己对部分新特性的评价，如有不对，烦请指正。Jwc28资讯网——每日最新资讯28at.com

本文所有示例代码可以在这里查看：https://codesandbox.io/p/sandbox/react19-demo-lmygpv^[2]Jwc28资讯网——每日最新资讯28at.com

React 19 的最重要改动，是新增了几个 Hook，均是针对 form 和异步网络请求通用能力的封装。有点类似 react-query 的 useQuery^[3]，或者 ahooks 的 useRequest^[4]。Jwc28资讯网——每日最新资讯28at.com

在 React Hooks 中，最基本的网络请求我们可能会这样写：Jwc28资讯网——每日最新资讯28at.com

function BasicDemo() {  const [name, setName] = useState("");  const [error, setError] = useState(null);  const [isPending, setIsPending] = useState(false);  const handleSubmit = async () => {    setIsPending(true);    try {      await updateName(name);      console.log("Name updated successfully");    } catch (e) {      setError(e.message);    }    setIsPending(false);  };  return (    <div>      <input value={name} onChange={(event) => setName(event.target.value)} />      <button onClick={handleSubmit} disabled={isPending}>        Update      </button>      {error && <p>{error}</p>}    </div>  );}

上面是一个最简单的网络请求示例，点击按钮后，请求 updateName 接口，同时维护了 isPending 和 error 两个请求相关的状态。Jwc28资讯网——每日最新资讯28at.com

useTransition 支持异步函数

useTransition 是 React 18  新增的一个 Hook，主要用来标记低优先级更新，低优先级更新是可以被中断的。在 React 18 中，useTransition 返回的 isPending 代表这次低优先级的更新正在等待中。Jwc28资讯网——每日最新资讯28at.com

const [isPending, startTransition] = useTransition();

在 18 中，useTransition 返回的 startTransition 只支持传递同步函数，而在 19 中，增加了对异步函数的支持。通过这个特性，我们可以用来自动维护异步请求的 isPending 状态。代码如下：Jwc28资讯网——每日最新资讯28at.com

export default function BasicDemo() {  const [name, setName] = useState("");  const [error, setError] = useState(null);  const [isPending, startTransition] = useTransition();  const handleSubmit = () => {    startTransition(async () => {      try {        await updateName(name);        console.log("Name updated successfully");      } catch (e) {        setError(e.message);      }    });  };  return (    <div>      <input value={name} onChange={(event) => setName(event.target.value)} />      <button onClick={handleSubmit} disabled={isPending}>        Update      </button>      {error && <p>{error}</p>}    </div>  );}

上述写法有两个好处：Jwc28资讯网——每日最新资讯28at.com

• 自动维护了 isPending 状态。
• 标记 updateName 触发的更新为低优先更新，不会阻塞 UI 渲染。

useActionState 管理异步函数状态

useActionState 是 React 19 新增的一个 Hook，用来管理异步函数，自动维护了 data、action、pending 等状态。经过 useActionState 改造的代码如下：Jwc28资讯网——每日最新资讯28at.com

export default function ActionStateDemo() {  const [name, setName] = useState("");  // 接受一个异步请求函数，返回 [data、action、pending]  const [error, handleSubmit, isPending] = useActionState(    async (previousState, name) => {      try {        await updateName(name);        console.log("Name updated successfully");        return null;      } catch (e) {        console.log("error");        return e.message;      }    }  );  return (    <div>      <input value={name} onChange={(event) => setName(event.target.value)} />      <button        onClick={() => {          startTransition(() => {            handleSubmit(name);          });        }}        disabled={isPending}      >        Update      </button>      {error && <p>{error}</p>}    </div>  );}

上面代码乍一看，感觉很熟悉，好像和大家经常用的 useRequest、useQuery、useSWR 等都差不多。我们通过 API 来仔细了解一下 useActionState。Jwc28资讯网——每日最新资讯28at.com

const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);

返回参数含义：Jwc28资讯网——每日最新资讯28at.com

• state：代表 fn 函数返回的内容，fn 未执行时，等于 initialState。
• formAction：用来触发 fn 函数执行，可以直接调用，也可以传递给 form 的 action 属性。
• isPending：fn 函数是否正在执行中。

传入参数含义：Jwc28资讯网——每日最新资讯28at.com

• fn：一个异步函数，接受两个参数 previousState和 formData。

• previousState：代表上一次执行 fn 返回的内容，首次调用等于 initialState。
• formData：代表调用 formAction 时传递的参数。

• initialState：fn 没执行时，默认的 state。
• permalink：一个 URL 字符串，通常和服务端组件有关系。（表示暂时没看懂干啥的）。

你可以能注意到了上面 demo 中使用了 startTransition 来包裹调用 handleSubmit。因为不用 startTransition 来包裹，useActionState 就没用。Jwc28资讯网——每日最新资讯28at.com

官方提供的 demo 是通过 form action 触发的 handleSubmit，其内置了 startTransition ，所以不需要手动设置。Jwc28资讯网——每日最新资讯28at.com

<form action={handleSubmit}></form>

有没有觉得很难用？我是这么觉得的。Jwc28资讯网——每日最新资讯28at.com

useOptimistic 乐观更新

乐观更新是一种常见的体验优化手段，在发送异步请求之前，我们默认请求是成功的，让用户立即看到成功后的状态。Jwc28资讯网——每日最新资讯28at.com

先来看看官方提供的例子：提交表单更新 name，可以立即将新的 name 更新到 UI 中。请求成功则 UI 不变，请求失败则 UI 回滚。Jwc28资讯网——每日最新资讯28at.com

function ChangeName() {  const [name, setName] = useState("");  // 定义乐观更新的状态  const [optimisticName, setOptimisticName] = useOptimistic(name);  const submitAction = async (formData) => {    const newName = formData.get("name");    // 请求之前，先把状态更新到 optimisticLike    setOptimisticName(newName);    try {      await updateName(newName);      // 成功之后，更新最终状态      setName(newName);    } catch (e) {      console.error(e);    }  };  return (    <form action={submitAction}>      <p>Your name is: {optimisticName}</p>      <p>        <label>Change Name:</label>        <input type="text" name="name" disabled={name !== optimisticName} />      </p>    </form>  );}

useOptimistic 用来维护临时状态，保证 UI 的乐观更新。Jwc28资讯网——每日最新资讯28at.com

const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);

返回参数含义：Jwc28资讯网——每日最新资讯28at.com

• optimisticState：乐观更新的状态，UI 上应该始终消费这个状态。默认等于真正的 state。
• addOptimistic：更新 optimisticState，可以通过 updateFn 指定更新逻辑。

传入参数含义：Jwc28资讯网——每日最新资讯28at.com

• state：真正的状态。
• updateFn：(currentState, optimisticValue) => newOptimisticState，调用 addOptimistic 的时候会通过这个函数生成新的 optimisticState。

这个 Hook API 看起来还是挺简单的。Jwc28资讯网——每日最新资讯28at.com

但是关于上面的 Demo 示例，我有个困惑：如果请求失败了，是怎么让状态回滚呢？Jwc28资讯网——每日最新资讯28at.com

经过测试，上面的代码确实有失败状态回滚的能力。Jwc28资讯网——每日最新资讯28at.com

其奥秘就是异步函数执行结束后，无论是成功还是失败，optimisticName 都会重置成和最新 state 一样。Jwc28资讯网——每日最新资讯28at.com

也就是我们调用了 setName(newName)，那 optimisticName 就变成新的状态。如果没调用，则变成之前的状态。Jwc28资讯网——每日最新资讯28at.com

关于乐观更新，我在日常开发中，经常会用到。经典的场景是点赞场景，用户点赞后，立即更新 UI 为点赞成功，如果请求失败后，再回滚 UI。Jwc28资讯网——每日最新资讯28at.com

使用 useOptimistic 后，其代码如下：Jwc28资讯网——每日最新资讯28at.com

function LikeDemo() {  const [like, setLike] = useState(false);  // 定义乐观更新的状态  const [optimisticLike, setOptimisticLike] = useOptimistic(like);  const handleLike = async () => {    const targetLike = !like;    try {      // 请求之前，先把状态更新到 optimisticLike      setOptimisticLike(targetLike);      await updateLike(like);      // 成功之后，更新最终状态      setLike(targetLike);    } catch (e) {      console.error(e);    }  };  return (    <div>      <div onClick={handleLike}>{optimisticLike ? "收藏" : "未收藏"}</div>    </div>  );}

上面代码看起来很简单，但是没用，会报错。Jwc28资讯网——每日最新资讯28at.com

Warning: An optimistic state update occurred outside a transition or action. To fix, move the update to an action, or wrap with startTransition.

意思是 optimistic state 的更新，必须包裹在 startTransition 里面。Jwc28资讯网——每日最新资讯28at.com

根据告警再优化下代码。Jwc28资讯网——每日最新资讯28at.com

function LikeDemo() {  const [like, setLike] = useState(false);  const [pending, startTransition] = useTransition();  const [optimisticLike, setOptimisticLike] = useOptimistic(like);  const handleLike = () => {    const targetLike = !like;    startTransition(async () => {      try {        setOptimisticLike(targetLike);        await updateLike(like);        setLike(targetLike);      } catch (e) {        console.error(e);      }    });  };  return (    <div>      <div onClick={handleLike}>{optimisticLike ? "收藏" : "未收藏"}</div>    </div>  );}

增加了 startTransition 后，功能可以正常使用。Jwc28资讯网——每日最新资讯28at.com

为什么官方的示例代码不用加 startTransition 呢？因为官方示例是通过 form 的 action 调用的，其默认内置了 startTransition。Jwc28资讯网——每日最新资讯28at.com

体验下来，我觉得这个 Hook，确实是没啥用，我普通代码实现个乐观更新，更简单。Jwc28资讯网——每日最新资讯28at.com

const [like, setLike] = useState(false);  const handleLike = async () => {    try {      setLike((s) => !s);      await updateLike(like);    } catch (e) {      setLike((s) => !s);    }  };

上面我们介绍了 React 19 新增的几个 Hook，不知道大家看下来什么感受？说说我个人的感受。Jwc28资讯网——每日最新资讯28at.com

React 19 之前的 Hook，基本都是原子级别的，必要的，比如 useState、useEffect、useTransition等，没有它就有些功能实现不了。Jwc28资讯网——每日最新资讯28at.com

但 React 19 新增的几个 Hook 明显不是这样的，而是更上层的封装，并且和 form 耦合很严重。Jwc28资讯网——每日最新资讯28at.com

我觉得在实际业务开发中，几乎不会用到上述 Hook。Jwc28资讯网——每日最新资讯28at.com

useFormStatus 获取表单状态

useFormStatus 是 React 19 新增的一个 Hook，主要用来快捷读取到最近的父级 form 表单的数据，其实就是类似 Context 的封装。Jwc28资讯网——每日最新资讯28at.com

import { useFormStatus } from "react-dom";import action from './actions';function Submit() {  const status = useFormStatus();  return <button disabled={status.pending}>Submit</button>}export default function App() {  return (    <form action={action}>      <Submit />    </form>  );}

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

useFormStatus 能拿到父级最近的 form 的状态：Jwc28资讯网——每日最新资讯28at.com

• pending：是否正在提交中。
• data：表单正在提交的数据，如果 form 没有被提交，则为 null。
• method：form 的 method 属性，get 或 post。
• action：form 的 action 属性，如果 action 不是函数，则为 null。

useFormStatus 使用场景较窄，绝大部分开发者不会用到。Jwc28资讯网——每日最新资讯28at.com

use

use 是 React 19 新增的一个特性，支持处理 Promise 和 Context。Jwc28资讯网——每日最新资讯28at.com

假如我们要实现这样一个需求：请求接口数据，请求过程中，显示 loading，请求成功，展示数据。Jwc28资讯网——每日最新资讯28at.com

以前我们可能会这样写代码。Jwc28资讯网——每日最新资讯28at.com

function ReactUseDemo() {  const [data, setData] = useState("");  const [loading, setLoading] = useState(false);  useEffect(() => {    setLoading(true);    getList()      .then((res) => {        setData(res);        setLoading(false);      })      .catch(() => {        setLoading(false);      });  }, []);  if (loading) return <div>Loading...</div>;  return <div>{data}</div>;}

通过 use 我们可以把代码改造成下面这样。Jwc28资讯网——每日最新资讯28at.com

export default function ReactUseDemo() {  return (    <Suspense fallback={<div>Loading...</div>}>      <ChildCompont />    </Suspense>  );}function ChildCompont() {  const data = use(getData());  return <div>{data}</div>;}

use 接收一个 Promise，会阻塞 render 继续渲染，通常需要配套 Suspense 处理 loading 状态，需要配套 ErrorBoundary 来处理异常状态。Jwc28资讯网——每日最新资讯28at.com

另外 use 也支持接收 Context，类似之前的 useContext，但比 useContext 更灵活，可以在条件语句和循环中使用。Jwc28资讯网——每日最新资讯28at.com

function MyPage() {  return (    <ThemeContext.Provider value="dark">      <Form />    </ThemeContext.Provider>  );}function Form() {  const theme = use(ThemeContext);  ......}

use 的使用有一些注意事项。Jwc28资讯网——每日最新资讯28at.com

• 需要在组件或 Hook 内部使用。
• use 可以在条件语句（比如 if）或者循环（比如 for）里面调用。

ref

在之前，父组件传递 ref 给子组件，子组件如果要消费，则必须通过 forwardRef 来消费。Jwc28资讯网——每日最新资讯28at.com

function RefDemo() {  const inputRef = useRef(null);  const focusInput = () => {    inputRef.current.focus();  };  return (    <div>      <Input ref={inputRef} />      <button onClick={focusInput}>Focus</button>    </div>  );}const Input = forwardRef((props, ref) => {  return <input ref={ref} />;});

React 19 开始，不需要使用 forwardRef 了，ref 可以作为一个普通的 props 了。Jwc28资讯网——每日最新资讯28at.com

export const Input = ({ ref }) => {  return <input ref={ref} />;};

未来在某个版本会删除掉 forwardRef。Jwc28资讯网——每日最新资讯28at.com

Context

在 React 19 之前，我们需要使用 Context.Provider，比如：Jwc28资讯网——每日最新资讯28at.com

import React, { createContext } from 'react'; const ThemeContext = createContext(''); function App({ children }) {  return (    <ThemeContext.Provider value="dark">      {children}    </ThemeContext.Provider>  );}

在 React 19 中，我们可以使用 Context来代替 Context.Provider了。Jwc28资讯网——每日最新资讯28at.com

function App({ children }) {  return (    <ThemeContext value="dark">      {children}    </ThemeContext>  );}

未来在某个版本会删除掉 Context.Provider。Jwc28资讯网——每日最新资讯28at.com

ref 支持返回 cleanup 函数

ref 支持返回一个 cleanup 函数，在组件卸载时会调用该函数。Jwc28资讯网——每日最新资讯28at.com

<input  ref={(ref) => {    // ref created    // NEW: return a cleanup function to reset    // the ref when element is removed from DOM.    return () => {      // ref cleanup    };  }}/>

useDeferredValue 增加了 initialValue 参数

useDeferredValue 现在增加了第二个参数 initialValue，指定初始化值。Jwc28资讯网——每日最新资讯28at.com

const value = useDeferredValue(deferredValue, initialValue);

支持 Document Metadata

在之前，如果我们希望动态的在组件中指定 meta、title、link等文档属性，我们可能会这样做：Jwc28资讯网——每日最新资讯28at.com

• 在 useEffect 中，通过 JS 手动创建
• 使用 react-helmet 这类三方库

在 React 19 中，原生支持了这三个文档属性，支持在组件中设置。Jwc28资讯网——每日最新资讯28at.com

在渲染过程中，React 发现这三种标签，会自动提升到  上。Jwc28资讯网——每日最新资讯28at.com

function BlogPost({post}) {  return (    <div>      <meta name="author" content="Josh" />      <link rel="author" href="https://twitter.com/joshcstory/" />      <meta name="keywords" content={post.keywords} />    </div>  );}

其它更多特性

• Server Components 和 Server Actions 将成为稳定特性
• 更多外联样式表能力支持：比如支持通过 precedence指定样式表的优先级，同样优先级的样式表会被放到一起
• 更多 script 标签能力支持
• 支持预加载资源

参考资料Jwc28资讯网——每日最新资讯28at.com

[1]React 18 全览: https://github.com/brickspert/blog/issues/48。Jwc28资讯网——每日最新资讯28at.com

[2]https://codesandbox.io/p/sandbox/react19-demo-lmygpv: https://codesandbox.io/p/sandbox/react19-demo-lmygpv。Jwc28资讯网——每日最新资讯28at.com

[3]useQuery: https://tanstack.com/query/latest/docs/framework/react/overview。Jwc28资讯网——每日最新资讯28at.com

[4]useRequest: https://ahooks.js.org/hooks/use-request/index。Jwc28资讯网——每日最新资讯28at.com

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-93707-0.htmlReact 19 全览，新特性进行一次深度的体验学习

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 转转回收持久层的架构演进

下一篇： 浅析Spring中Async注解底层异步线程池原理