众所周知，前端开发这个领域日新月异，每隔一段时间就会整出一点新玩意，被戏称做“前端娱乐圈”，圈子里大佬一个比一个卷，都在疯狂的造轮子。
然而有这么一位选手，自从 2022 年 6 月发布了最后一次稳定版本后，就一直没有再发布新的版本，它就是大名鼎鼎的前端三大框架之一 React。
就在昨日，时隔将近两年，React 突然宣布，React 19 测试版现已在 npm 上发布，随之而来的还有 React 18.3.0 稳定版。
下面让我们一起来看看 React 19 测试版有什么新特性吧！
React 19 的新特性
Actions
在 React 应用中，执行数据变更然后更新状态是一个常见的用例。例如，当用户提交表单来更改他们的名字时，你将发起一个 API 请求，然后处理响应。在过去，你需要手动处理待处理状态、错误、乐观更新和顺序请求。
例如，你可以在 useState 中处理待处理和错误状态：
// 动作之前
function UpdateName({}) {
const [name, setName] = useState(" ");
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(false);
const handleSubmit = async () => {
setIsPending(true);
const error = await updateName(name);
setIsPending(false);
if (error) {
setError(error);
return;
}
redirect("/path");
};
return (
setName(event.target.value)} />
更新
{error &&
{error}
});
}
在 React 19 中，我们增加了对在转换中使用异步函数以自动处理待处理状态、错误、表单和乐观更新的支持。
例如，你可以使用 useTransition 来为你处理待处理状态：
// 使用动作中的待处理状态
function UpdateName({}) {
const [name, setName] = useState(" ");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = async () => {
startTransition(async () => {
const error = await updateName(name);
if (error) {
setError(error);
return;
}
redirect("/path");
})
};
return (
setName(event.target.value)} />
更新
{error &&
{error}
});
}
异步转换将立即将 isPending 状态设置为 true，发起异步请求，并在任何转换后将 isPending 设置为 false。这允许你在数据变更时保持当前 UI 的响应性和交互性。
按照惯例，使用异步转换的函数被称为 Actions。Actions 自动为你提交数据：
待处理状态：动作提供了一个从请求开始就启动的待处理状态，并在最终状态更新提交时自动重置。乐观更新：动作支持新的 useOptimistic 钩子，因此在请求提交时你可以向用户显示即时反馈。错误处理：动作提供错误处理，因此当请求失败时，你可以显示错误边界，并自动将乐观更新回退到它们的原始值。表单：
);
}
在下一节中，我们将分解 React 19 中每个新动作特性的细节。
新钩子：useActionState
为了使动作的常见情况更容易，我们添加了一个名为 useActionState 的新钩子：
const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {
const {error} = await updateName(newName);
if (!error) {
// 你可以返回动作的任何结果。
// 在这里，我们只返回错误。
return error;
}
// 处理成功
});
useActionState 接受一个函数（“动作”），并返回一个包装后的动作来调用。这是因为动作可以组合。当包装后的动作被调用时，useActionState 将返回动作的最后一个结果作为 data，并将动作的待处理状态作为 pending。
React.useActionState 之前在 Canary 版本中被称为 ReactDOM.useFormState，但我们已经重命名了它并弃用了 useFormState。
React DOM：
发表评论