早在数月前，React团队便预告了React19的积极开发，并预计上半年发布。4月25日，React总算发布了v19测试版。该版本主要面向各大库，以确保它们与React19的兼容性。为此，建议开发者先升级至最新的稳定版18.3.0，静候React19的即将版发布。
React19带来了众多新特点和改进，除了提高了开发者的使用体验，还进一步优化了React应用的性能。为了让开发者能否平稳过渡到React19，React团队特意打算了一份详细的升级手册，详尽列举了升级步骤和可能碰到的重大变化。
接出来，本文将探讨React18.3与React19的更新内容，并探求React19的升级手册，推动更好地拥抱这一重大更新！
React18.3更新内容
React18.3相对于18.2降低了对废弃API的警告以及其他为React19所需的修改。
ReactDOM
React19更新内容
在React应用中，执行数据变更并据此更新状态是一个常见的需求。例如，用户递交表单以更改姓名时，我们会发起API恳求并处理其响应。往年，我们不得不自动管理挂起状态、错误处理、乐观更新以及次序恳求等逻辑。
比如，可以使用来处理挂起和错误状态：
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}
}
);
}
在React19中降低了对在转换中使用异步函数的支持，以手动处理挂起状态、错误、表单和豁达更新。
比如，可以使用来手动处理挂起状态：
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}
}
);
}
异步转换会立即将状态设为true，发起异步恳求，并在转换完成后将设置为false。这样可以确保数据变化时，UI一直保持响应和交互性。
在功能的基础上，React19还推出了Hook来简化豁达更新的管理，以及React.Hook来处理的常见场景。同时，在react-dom中，新增了来手动管理表单操作，并提供了来支持表单中的常见需求。
在React19中，前面的反例可以简化为：
function ChangeName({ name, setName }) {
const [error, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const error = await updateName(formData.get("name"));
if (error) {
return error;
}
redirect("/path");
}
);
return (
);
}
下边就来瞧瞧这种新的功能的作用和使用方式。
全新Hook：
为了让常见的用例愈发简便，因而添加了一个名为的新Hook：
const [error, submitAction, isPending] = useActionState(async (previousState, newName) => {
const error = await updateName(newName);
if (error) {
// 可以返回Action的任何结果，这里只返回错误信息。
return error;
}
// 处理成功的情况
});
接受一个函数（即“”），并返回一个可调用的包装。这之所以还能工作是由于是可组合的。当调用包装后的时，将返回的最后一个结果作为数据，并将的挂起状态作为返回。
ReactDOM:
在React19中，与react-dom的新特点进行了深度整合。如今，可以将函数作为、和元素的和属性，便于手动使用递交表单：
当的成功执行时，React会手动为不受控组件重置表单状态。假如须要自动重置，ReactDOMAPI提供了全新的方式。
ReactDOM新Hook：
在建立设计系统时，常常须要创建一些设计组件，这种组件须要才能访问其所在表单的状态信息，而毋须通过层层传递props来实现。即使通过也可以实现这一功能，但为了简化常见场景下的使用，React19引入了一个新的Hook：
import { useFormStatus } from 'react-dom';
function DesignButton() {
const { pending } = useFormStatus();
return ;
}
可以读取父级的状态，如同该表单是一个一样。
全新Hook：
在数据变更操作中，一种常见的UI模式是在异步恳求执行期间豁达地显示预期的最终状态。React19引入了新的Hook，以简化这一流程：
function ChangeName({currentName, onUpdateName}) {
const [optimisticName, setOptimisticName] = useOptimistic(currentName);
const submitAction = async formData => {
const newName = formData.get("name");
setOptimisticName(newName);
const updatedName = await updateName(newName);
onUpdateName(updatedName);
};
return (
);
}
在这个事例中，Hook准许在恳求还在进行时，立刻将输入框的值（即）设置为，因而豁达地更新UI。假如更新成功，则通过反弹函数来确认状态的修改；假如更新失败或发生错误，可以通过回滚到原始状态。
全新API：use
在React19中，引入了一个全新的API——use，它容许在组件渲染时直接读取资源。
举个反例，可以使用use来读取一个对象，而React将会手动挂起（）组件的渲染，直至该解析完成：
import { use } from 'react';
function Comments({ commentsPromise }) {
// 使用use读取Promise，React会在Promise解析前挂起组件渲染
const comments = use(commentsPromise);
return (
{comments.map((comment) => (
{comment.text}
))}
);
}
function Page({ commentsPromise }) {
// 当Comments组件因use挂起时，这里会显示Suspense的fallback内容
return (
加载中... 
