React v19 正式发布

  • Actions:

    • useActionState Hook:接受一个函数(Action),返回包装后的 Action 供调用,调用时返回结果和等待状态,用于简化常见的 Actions 场景处理。

    • useOptimistic Hook:在执行数据变更的异步请求时,以乐观方式展示最终状态,更新完成或出错后自动切换回原值,优化用户界面反馈。

    • <form> Actions 集成 :在 react-dom 中,支持将函数作为 <form><input><button> 元素的相关属性传递,实现自动提交表单,成功时自动重置不受控组件表单,也可手动调用 requestFormReset API 重置。

    • useFormStatus Hook :方便编写设计组件获取所处 <form> 表单信息,无需层层传递 props,可像读取 Context 提供者状态一样读取表单状态。

    • use API :用于在渲染时读取资源,可读取 Promise 并让 React 挂起直至其解析,也能读取 Context,且可条件性调用。

  • 新的 React DOM 静态 APIprerenderprerenderToNodeStream 用于静态网站生成,改进 renderToString 功能,会等待数据加载后生成静态 HTML,适配 Node.js Streams 和 Web Streams 等流环境。

  • React Server Components:提供在独立于客户端应用或 SSR 服务器环境中提前渲染组件的新选择,相关库可将 React 19 作为对等依赖,应用于支持全栈 React 架构的框架。

  • ref 作为 prop :现在可以在函数组件中直接使用 ref 作为 prop

  • 水合错误改进:改进了客户端渲染和服务端渲染之间的水合错误报告。

  • <Context> 作为提供者 :可以直接使用 <Context> 作为提供者,而不是 <Context.Provider>

参考:

https://react.dev/blog/2024/12/05/react-19

相关推荐
前端一课4 分钟前
我还在上班,怎么做一个长期有价值的号
前端
前端一课16 分钟前
用 TRAE Work 把项目踩坑经验沉淀成「团队可复用工程规范」,新人再也不重复掉坑
前端·后端
cyadyx30 分钟前
【Three.js】Three.js 中加载 3D 模型
前端·javascript·3d
汉堡大王952731 分钟前
前端工程师 TypeScript 上手指南:一条清晰的从入门到精通路线
前端·javascript·react.js
wear工程师35 分钟前
防抖为什么会失效?React 面试里的闭包和定时器
javascript·react.js
浅水壁虎37 分钟前
vue基础(第四章 Pinia)
前端·javascript·vue.js
用户21816970493040 分钟前
Flutter (十四) SingleChildScrollView ListView
前端
昭阳43 分钟前
4 个 vibe coding 项目,一个普通前端的半年
前端·人工智能·设计
颜进强1 小时前
Claude Code - 26 效率三件套:cc-switch 切模型 · codeburn 算成本 · claude-hud 看状态
前端·后端·ai编程
东方小月1 小时前
从零开发一个 Coding Agent(八):如何使用 Agent 类管理对话状态
前端·人工智能