如果你对 React 18 还不熟悉，欢迎阅读之前的文章《
React 18 全览
[1]
》
最近 React 发布了 V19 RC 版本，按照惯例，我们对 React 19 的新特性进行一次深度的体验学习，以便尽快上手新特性。
这篇文章，我会通过丰富的示例，演示 React 19 的新特性，以及相较于老版本的差异。同时会附上自己对部分新特性的评价，如有不对，烦请指正。
本文所有示例代码可以在这里查看：
https://codesandbox.io/p/sandbox/react19-demo-lmygpv
[2]
React 19 的最重要改动，是新增了几个 Hook，均是针对 form 和异步网络请求通用能力的封装。有点类似 react-query 的
useQuery
[3]
，或者 ahooks 的
useRequest
[4]
。
在 React Hooks 中，最基本的网络请求我们可能会这样写：
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 两个请求相关的状态。
useTransition 支持异步函数
useTransition 是 React 18 新增的一个 Hook，主要用来标记低优先级更新，低优先级更新是可以被中断的。在 React 18 中，useTransition 返回的 isPending 代表这次低优先级的更新正在等待中。
const [isPending, startTransition] = useTransition();
在 18 中，useTransition 返回的 startTransition 只支持传递同步函数，而在 19 中，增加了对异步函数的支持。通过这个特性，我们可以用来自动维护异步请求的 isPending 状态。代码如下：
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>
);
}
上述写法有两个好处：
-
-
标记 updateName 触发的更新为低优先更新，不会阻塞 UI 渲染
useActionState 管理异步函数状态
useActionState 是 React 19 新增的一个 Hook，用来管理异步函数，自动维护了 data、action、pending 等状态。经过 useActionState 改造的代码如下：
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
const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);
返回参数含义：
-
state
：代表 fn 函数返回的内容，fn 未执行时，等于 initialState
-
formAction
：用来触发 fn 函数执行，可以直接调用，也可以传递给 form 的 action 属性
-
传入参数含义：
-
fn
：一个异步函数，接受两个参数
previousState
和
formData
-
previousState
：代表上一次执行 fn 返回的内容，首次调用等于 initialState
-
formData
：代表调用 formAction 时传递的参数
-
initialState
：fn 没执行时，默认的 state
-
permalink
：一个 URL 字符串，通常和服务端组件有关系。（表示暂时没看懂干啥的）
你可以能注意到了上面 demo 中使用了 startTransition 来包裹调用 handleSubmit。
因为不用 startTransition 来包裹，useActionState 就没用。
官方提供的 demo 是通过 form action 触发的 handleSubmit，其内置了 startTransition ，所以不需要手动设置。
有没有觉得很难用？我是这么觉得的。
useOptimistic 乐观更新
乐观更新是一种常见的体验优化手段，在发送异步请求之前，我们默认请求是成功的，让用户立即看到成功后的状态。
先来看看官方提供的例子：提交表单更新 name，可以立即将新的 name 更新到 UI 中。请求成功则 UI 不变，请求失败则 UI 回滚。
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 的乐观更新。
const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);
返回参数含义：
-
optimisticState
：乐观更新的状态，UI 上应该始终消费这个状态。默认等于真正的 state。
-
addOptimistic
：更新 optimisticState，可以通过 updateFn 指定更新逻辑
传入参数含义：
-
-
updateFn
：
(currentState, optimisticValue) => newOptimisticState
，调用 addOptimistic 的时候会通过这个函数生成新的 optimisticState
这个 Hook API 看起来还是挺简单的。
但是关于上面的 Demo 示例，我有个困惑：
如果请求失败了，是怎么让状态回滚呢？
经过测试，上面的代码确实有失败状态回滚的能力。
其奥秘就是异步函数执行结束后，无论是成功还是失败，optimisticName 都会重置成和最新 state 一样。
也就是我们调用了 setName(newName)，那 optimisticName 就变成新的状态。如果没调用，则变成之前的状态。
关于乐观更新，我在日常开发中，经常会用到。经典的场景是点赞场景，用户点赞后，立即更新 UI 为点赞成功，如果请求失败后，再回滚 UI。
使用 useOptimistic 后，其代码如下
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>
);
}
上面代码看起来很简单，但是没用，会报错
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 里面。
根据告警再优化下代码
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 后，功能可以正常使用。
为什么官方的示例代码不用加 startTransition 呢？因为官方示例是通过 form 的 action 调用的，其默认内置了 startTransition。
体验下来，我觉得这个 Hook，确实是没啥用，我普通代码实现个乐观更新，更简单。
