新的 React 带来了什么 - 获得清晰的了解
- Linda Hamilton原创
- 2024-11-24 13:16:15355浏览
React 19 于 2024 年 4 月 25 日发布。JavaScript 世界变化如此之快，有时让人感觉难以跟上。但是，当这些更改旨在让您作为 React 开发人员的生活变得更轻松时，就值得一看，对吧？由于 React 是这个生态系统中如此重要的一部分，因此保持更新是必须的。
React 19 最好的部分是它专注于让事情变得更简单。这些更新旨在让学习 React 变得更容易，让您花更多时间进行创建，而不是处理棘手的设置。一些新功能确实改变了游戏规则，可能会极大地改变您的工作方式，所以您绝对不想错过它们。
我总是尝试以易于理解的方式解释事物，而不使用复杂的词语。本文也不例外。我的目标是确保您清楚了解所有内容，所以让我们一起探索 React 19 中的精彩更新！
请记住，React 19 还不太稳定。目前它被称为 React Canary。因此，请记住，实际上并不建议将其用于生产。
反应编译器
为了优化我们的 React 应用程序，我们使用一些内置方法，例如 useMemo、useCallback 或 memo。这告诉 React 如果输入没有改变就不要再次编译代码。但如果你忘记应用记忆化，就会导致浪费 React 资源和计算能力。为了解决这个问题，React 19 引入了 React Compiler。 React 的新编译器是 19 版本新发布的亮点。新的编译器会在幕后优化您的代码，因此您可以放弃这些钩子并专注于编写漂亮、干净的 React 组件。
简而言之，您不需要使用 useMemo 或 useCallback 包装函数来优化性能，也不需要使用 memo 包装组件来防止重新渲染组件。
操作（useTransition 挂钩）
我们来聊点废话吧？！！你是否注意到在 React 19 发布之前 useTransition 钩子几乎没有被提及？还是只有我这样？嗯，至少这是我注意到的，尤其是对于初级开发人员来说。无论如何，让我向您介绍一下它在之前版本中的工作原理，然后我们将了解为什么它现在如此重要。
useTransition 返回一个包含两个元素的数组：startTransition 函数和 isPending 布尔值。您可以将状态更新包装在 startTransition 函数中，以将它们标记为转换（优先级较低的代码）。这意味着用 startTransition 包裹的部分在其他连续任务完成后开始工作。
在 React 18 中，startTransition 函数不直接支持异步函数。这是一个限制，因为 startTransition 旨在将更新标记为低优先级，但无法原生处理异步逻辑。
在 React 19 中，此限制已得到解决。现在，startTransition 支持异步函数，这意味着您可以在其中执行异步任务（例如，数据获取），同时将这些更新标记为转换。此增强功能允许更灵活和直观地使用 startTransition，使其感觉像是一项“新”功能，尽管它在技术上是对现有功能的改进。
？
按照惯例，使用异步转换的函数称为“操作”。
例如，您可以在 useState 中处理挂起和错误状态：
// Before Actions
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 (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
React 19 支持在转换中使用异步函数来自动处理待处理状态、错误、表单和乐观更新。例如，您可以使用 useTransition 来为您处理挂起状态：
// Using pending state from Actions
function UpdateName({}) {
const [name, setName] = useState("");
const [error, setError] = useState(null);
const [isPending, startTransition] = useTransition();
const handleSubmit = () => {
startTransition(async () => {
const error = await updateName(name);
if (error) {
setError(error);
return;
}
redirect("/path");
})
};
return (
<div>
<input value={name} onChange={(event) => setName(event.target.value)} />
<button onClick={handleSubmit} disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</div>
);
}
异步转换将立即将 isPending 状态设置为 true，发出异步请求，并在任何转换后将 isPending 切换为 false。这使您可以在数据更改时保持当前 UI 的响应能力和交互性。
<表格>行动
React 团队添加了对传递函数作为操作的支持。
export default function App() {
const [name, setName] = useState(
() => JSON.parse(localStorage.getItem("name")) || "Anonymous user"
)
async function formAction(formData){
try {
const newName = await updateNameInDB(formData.get("name"))
setName(newName)
}
}
return (
<>
<p className="username">
Current user: <span>{name}</span>
</p>
<form action={formAction}>
<input
type="text"
name="name"
required
/>
<button type="submit">Update</button>
</form>
</>
)
}
formAction 函数（您可以命名任何名称）在其参数中获取表单数据。每个字段都由名称属性表示，因此在命名输入时必须小心。 formData 参数实际上是本机 FormData Web API 对象。您可以在 mdn 网络文档上找到它。另一个好处是你不需要应用 event.preventDefault()，因为它是由 React 处理的。
当表单操作成功时，React 会自动重置表单。但如果你想重置
以上是新的 React 带来了什么 - 获得清晰的了解的详细内容。更多信息请关注PHP中文网其他相关文章！