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

相关推荐
万少44 分钟前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站3 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名5 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫6 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊6 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter6 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折6 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_6 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
不会敲代码16 小时前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
Angelial6 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js