react 组件:Suspense

允许在子组件完成加载前展示后备方案。

children:真正的 UI 渲染内容。如果 children 在渲染中被挂起,Suspense 边界将会渲染 fallback。

fallback:真正的 UI 未渲染完成时代替其渲染的备用 UI,它可以是任何有效的 React 节点。后备方案通常是一个轻量的占位符,例如表示加载中的图标或者骨架屏。当 children 被挂起时,Suspense 将自动切换至渲染 fallback;当数据准备好时,又会自动切换至渲染 children。如果 fallback 在渲染中被挂起,那么将自动激活最近的 Suspense 边界。

当内容正在加载时显示后备方案

你可以使用 Suspense 边界包裹你应用的任何部分:<Suspense fallback={<Loading />}><Albums />
</Suspense>
React 将展示 后备方案 直到  children  需要
的所有代码和数据都加载完成。

只有启用了 Suspense 的数据源才会激活 Suspense 组件,它们包括:
支持 Suspense 的框架如 Relay 和 Next.js。
使用 lazy 懒加载组件代码。
使用 use 读取 Promise 的值。
Suspense 无法 检测在 Effect 或事件处理程序中获取数据的情况。
在上面的 Albums 组件中,正确的数据加载方法取决于你使用的框架。如果你使用了支持 Suspense 的框架,你会在其数据获取文档中找到详细信息。
目前尚不支持在不使用固定框架的情况下进行启用 Suspense 的数据获取。实现支持 Suspense 数据源的要求是不稳定的,也没有文档。React 将在未来的版本中发布官方 API,用于与 Suspense 集成数据源。

同时展示内容

默认情况下,Suspense 内部的整棵组件树都被视为一个单独的单元。例如,即使 只有一个 组件因等待数据而被挂起,Suspense 内部的整棵组件树中的 所有 的组件都将被替换为加载中指示器:

<Suspense fallback={<Loading />}><Biography /><Panel><Albums /></Panel>
</Suspense>

逐步加载内容

当一个组件被挂起时,最近的父级 Suspense 组件会展示后备方案。这允许你嵌套多个 Suspense 组件创建一个加载序列。每个 Suspense 边界的后备方案都会在下一级内容可用时填充。例如,你可以给专辑列表设置自己的后备方案

<Suspense fallback={<BigSpinner />}><Biography /><Suspense fallback={<AlbumsGlimmer />}><Panel><Albums /></Panel></Suspense>
</Suspense>
调整之后,Biography 不需要“等待” Albums 加载完成
就可以展示。加载序列将会是:
1)如果 Biography 没有加载完成,BigSpinner 会显示在整个内容区域的位置。
2)一旦 Biography 加载完成,BigSpinner 会被内容替换。
3)如果 Albums 没有加载完成,AlbumsGlimmer 会显示在 Albums 和它的父级 Panel 的位置。
4)最后,一旦 Albums 加载完成,它会替换 AlbumsGlimmer。

在新内容加载时展示过时内容

一个常见的替代 UI 模式是 延迟 更新列表,并在新的结果准备好之前,总是显示之前的结果。useDeferredValue Hook 允许你传递一个延迟版本的查询:
export default function App() {const [query, setQuery] = useState('');const deferredQuery = useDeferredValue(query);return (<><label>Search albums:<input value={query} onChange={e => setQuery(e.target.value)} /></label><Suspense fallback={<h2>Loading...</h2>}><SearchResults query={deferredQuery} /></Suspense></>);
}

阻止隐藏已经显示的内容

表明 transition 正在发生

在上面的例子中,当你点击按钮,没有任何视觉指示表明导航正在进行。为了添加指示器,你可以用 useTransition 替换 startTransition,它会给你一个布尔值 isPending。在下面的例子中,它被用于当 transition 发生时改变网站头部的样式:

在导航时重置 Suspense 边界

为服务器错误和客户端内容提供后备方案

如果你使用过 流式服务器渲染 API(或依赖它们的框架),React 也会使用你的 <Suspense> 边界来处理服务器上的错误。如果组件在服务器上抛出错误,React 将不会中止服务器渲染。相反,它将找到最接近的 <Suspense> 组件并将其后备方案(例如一个加载中指示器)包含到生成的服务端 HTML 中。用户将首先看到一个加载中指示器。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/811046.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习51单片机必备:从电子基础到编程技巧全解析

学习51单片机需要掌握一系列的基础知识和技能&#xff0c;以下是一些主要的学习内容&#xff1a; 电子基础知识 了解基本的电子元件和电路原理是学习单片机的基础。这有助于理解单片机如何与外围设备交互以及如何设计电路。 数字逻辑 理解数字逻辑和布尔代数&#xff0c;对于编…

Redis性能管理和集群的三种模式(二)

一、Redis集群模式 1.1 redis的定义 redis 集群 是一个提供高性能、高可用、数据分片、故障转移特性的分布式数据解决方案 1.2 redis的功能 数据分片&#xff1a;redis cluster 实现了数据自动分片&#xff0c;每个节点都会保存一份数据故障转移&#xff1a;若个某个节点发生故…

学习java第四十一天

Spring MVC运行流程&#xff1a; 第一步&#xff1a;发起请求到前端控制器(DispatcherServlet) 第二步&#xff1a;前端控制器请求HandlerMapping查找 Handler&#xff08; 可以根据xml配置、注解进行查找&#xff09; 第三步&#xff1a;处理器映射器HandlerMapping向前端控…

探索柔性负荷在综合能源系统中的优化调度策略

柔性负荷&#xff0c;指的是那些可以根据系统需求和市场信号调整其使用模式的负荷。它们包括可平移负荷、可转移负荷和可削减负荷。这些负荷的灵活性为IES&#xff08; Integrated Energy System, 综合能源系统&#xff09;提供了额外的调节能力&#xff0c;有助于平衡供需、提…

一些AI视频生成器的介绍和比较

传统上&#xff0c;制作和传播视频内容既耗时又昂贵&#xff0c;但人工智能正在改变这一情景&#xff0c;使视频生成变得更加容易。现在&#xff0c;有许多可用的人工智能视频生成器&#xff0c;它们为用户提供了简单而高效的工具&#xff0c;可以从文本或脚本中快速创建高质量…

MyBatis实例更新

MyBatis具体 准备工作 预编译SQL 新增 更新 查询 //查询员工Select("select * from emp where id #{id}")public Emp getById(Integer id);//方案一:给字段起别名&#xff0c;让别名与实体类属性一致Select("select id,username,password,name,gender,image,j…

DataX案例,MongoDB数据导入HDFS与MySQL

【尚硅谷】Alibaba开源数据同步工具DataX技术教程_哔哩哔哩_bilibili 目录 1、MongoDB 1.1、MongoDB介绍 1.2、MongoDB基本概念解析 1.3、MongoDB中的数据存储结构 1.4、MongoDB启动服务 1.5、MongoDB小案例 2、DataX导入导出案例 2.1、读取MongoDB的数据导入到HDFS 2…

vue3获取当前路由为什么一直是 / ?

vue3获取当前路由为什么一直是 / ? 今天在写项目的时候&#xff0c;我想获取到当前的路由去做路由的匹配&#xff0c;我靠&#xff0c;不知道抽什么风一直获取的路由是 / 最搞笑的是gpt都不明白问题出在哪里 &#xff0c;经过一顿百度&#xff0c;最终发现问题如下&#xff…

基于双向长短期神经网络BILSTM的线损率预测,基于gru的线损率预测

目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 BILSTM神经网络 基于双向长短期神经网络BILSTM的线损率预测,基于gru的线损率预测 完整代码:基于双向长短期神经网络BILSTM的线损率预测,基于gru的线损率预测(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/d…

Failed to load dll

Unity运行时提示 dll 加载失败 Plugins: Failed to load ‘Assets/Plugins/xxx.dll’ because one or more of its dependencies could not be loaded. 使用 Dependency Walker 查看这个 dll 引用&#xff0c;一推引用丢失 最后确认是 C 组件缺失 打开 Visual Studio Install…

intellij idea的快速配置详细使用

IntelliJ IDEA 是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;适用于多种编程语言&#xff0c;如Java、Kotlin、Scala、Python等。在 IntelliJ IDEA 中进行快速配置主要涉及创建项目、导入现有项目、配置编译器等。下面是一些详细的使用说明&#xff1a…

Java基础入门--第十一章--JDBC(Java Database Connection)Java数据库连接

JDBC 11.1 什么是JDBC11.1.1 JDBC概述11.1.2 JDBC驱动程序 11.2 JDBC的常用API11.3 JDBC编程11.3.1 JDBC 编程步骤11.3.2 实现第一个JDBC程序 我的MySQL的root密码: root 11.1 什么是JDBC 11.1.1 JDBC概述 JDBC的全称是Java数据库连接&#xff08;Java Database Connectivit…

光威神策PRO PCIe 5.0 SSD发布,国产固态硬盘进入10G俱乐部

全球半导体供应链的紧张局势和闪存资源的短缺让许多行业都面临着不小的压力 &#xff0c; 连带的也让消费者难以获取物美价廉的闪存产品 。但是&#xff0c;总有一些企业能够逆流而上&#xff0c; 像是 光威科技这家国产存储品牌&#xff0c; 最近就给国内消费者 带来了一个惊喜…

【JAVA基础篇教学】第六篇:Java异常处理

博主打算从0-1讲解下java基础教学&#xff0c;今天教学第五篇&#xff1a; Java异常处理。 异常处理是Java编程中重要的一部分&#xff0c;它允许开发人员在程序运行时检测和处理各种错误情况&#xff0c;以保证程序的稳定性和可靠性。在Java中&#xff0c;异常被表示为对象&am…

创建组件的10条准则

诚然&#xff0c;想要创建一个供多人使用的组件绝非易事&#xff0c;组件包含属性&#xff08;props&#xff09;&#xff0c;如果这些属性要作为公开 API 的一部分&#xff0c;那就必须非常仔细地考虑组件应该接受哪些属性。 本文会简要介绍 API 设计中的一些最佳实践&#x…

性能测试 之 接口性能优化(索引相关)

导致接口性能出现问题的原因非常多&#xff0c;千奇百怪&#xff0c;当出现性能问题时&#xff0c;如何进行优化&#xff0c;有以下一些操作&#xff1a; 1. 优化索引 1.1 添加索引 当项目中没有索引时&#xff0c;此时就该考虑添加索引。 当 sql 语句中 where 条件的关键字段…

【Kafka】Zookeeper集群 + Kafka集群

Zookeeper 概述 Zookeeper是一个开源的分布式的&#xff0c;为分布式框架提供协调服务的Apache项目。 Zookeeper 工作机制★★★ Zookeeper从设计模式角度来理解&#xff1a; 1&#xff09;是一个基于观察者模式设计的分布式服务管理框架&#xff1b; 它负责存储和管理大家都关…

AI大模型创新交汇点:当AI遇见艺术

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

代码随想录算法训练营三刷 day48 |动态规划之 198打家劫舍 213打家劫舍II 337打家劫舍III

三刷day48 198.打家劫舍1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义2.确定递推公式3.dp数组如何初始化4.确定遍历顺序5.举例推导dp数组 213.打家劫舍II情况一&#xff1a;考虑不包含首尾元素情况二&#xff1a;考虑包含首元素&#xff0c;不包含尾元素情况三&…

飞机降落(蓝桥杯)

文章目录 [蓝桥杯 2023 省 B] 飞机降落题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示回溯算法&#xff08;DFS&#xff09; [蓝桥杯 2023 省 B] 飞机降落 题目描述 N N N 架飞机准备降落到某个只有一条跑道的机场。其中第 i i i 架飞机在 T i T_{i} Ti​ 时刻…