现代 React Web 开发实战
宋一玮
FreeWheel 中国研发中心前端架构师
17517 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 34 讲
现代 React Web 开发实战
15
15
1.0x
00:00/00:00
登录|注册

React 19新增的use以及其他API

你好,我是宋一玮,欢迎回到 React 应用开发的学习。
上节课我们学习了如何创建 React 19 项目,了解了 React 19 的 action,及其背后的 transition 概念,还学习了与表单 action 相关的三个新 Hooks:useActionStateuseFormStatususeOptimistic
这节课,我们会继续介绍 React 19 的新功能,包括新 API use 的两种用法、refforwardRef 的变化,以及一些新支持的 HTML 标签<title><link><meta><style><script>

Suspense 与组件的懒加载

在介绍 React 19 新 API use 之前,我们先聊一下 React 中 Suspense(中文可以翻译为“等待”,为避免歧义下文将沿用英文单词)的概念以及它的使用场景。React 早在 16.6 版本就加入了 <Suspense> 组件,当时它的主要用途是配合React.lazy() API 实现自定义组件的懒加载。随着 React 18 引入 Fiber 协调引擎,Suspense 的功能进一步增强,适用的场景也扩展到获取异步数据。
为了方便理解 Suspense,我们先来看一下组件懒加载。随着 React 项目规模的不断提升,为了减少用户首次加载的等待时间,优化用户体验,开发者可能会需要进行代码分割。组件懒加载是代码分割的重要方式之一。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
  • 解释
  • 总结

1. React 19新增的`use` API包括两种用法:`use(Promise)`和`use(Context)`,分别用于处理异步函数和订阅context,增强了React对异步处理的支持。 2. `use(Promise)`可以在组件内部使用Promise,并配合Suspense边界实现组件挂起和异步数据加载,提升了React对异步函数的支持。 3. `use(Context)`与`useContext` Hook类似,用于在组件中读取和订阅context,但更灵活,可以用在组件函数的条件分支或循环里。 4. React 19中,提供context不再需要`.Provider`后缀,直接使用`<ContextName value={value}>`即可,简化了提供context的语法。 5. 介绍了React中的Suspense概念及其使用场景,以及如何配合`React.lazy()`实现组件的懒加载,提升了页面加载性能和用户体验。 6. React 19新增的一些API,包括`ref`与`forwardRef`的变化,以及新支持的HTML标签`<title>`、`<link>`、`<meta>`、`<style>`、`<script>`等。 7. React 19中,`ref`可以像其他props一样,直接在函数组件参数里定义,无需再调用`forwardRef`,减少了开发者的负担。 8. React 19新增支持的HTML标签`<title>`、`<link>`、`<meta>`、`<style>`、`<script>`可以直接在JSX中定义文档元数据、样式表和加载执行JS脚本,简化了开发流程。 9. React 19的`<style>`和`<link>`标签支持`precedence`属性,用于设置CSS样式优先级,提供更灵活的样式控制。 10. React 19的`<script>`标签内建支持加载和执行JS脚本,简化了整合第三方脚本的实现方式。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《现代 React Web 开发实战》
新⼈⾸单¥59
立即购买
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
显示
设置
留言
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部
文章页面操作
MAC
windows
作用
esc
esc
退出沉浸式阅读
shift + f
f11
进入/退出沉浸式
command + ⬆️
home
滚动到页面顶部
command + ⬇️
end
滚动到页面底部
⬅️ (仅针对订阅)
⬅️ (仅针对订阅)
上一篇
➡️ (仅针对订阅)
➡️ (仅针对订阅)
下一篇
command + j
page up
向下滚动一屏
command + k
page down
向上滚动一屏
p
p
音频播放/暂停
j
j
向下滚动一点
k
k
向上滚动一点
空格
空格
向下滚动一屏
播放器操作
MAC
windows
作用
esc
esc
退出全屏
⬅️
⬅️
快退
➡️
➡️
快进
空格
空格
视频播放/暂停(视频全屏时生效)