useTransition 和 useDeferredValue 初体验

useTransition 是一个帮助你在不阻塞 UI 的情况下更新状态的 React Hook。

通过 transition,UI 仍将在重新渲染过程中保持响应性。例如用户点击一个选项卡,但改变了主意并点击另一个选项卡,他们可以在不等待第一个重新渲染完成的情况下完成操作。

function TabContainer() {const [isPending, startTransition] = useTransition();const [tab, setTab] = useState('about');function selectTab(nextTab) {startTransition(() => {setTab(nextTab);});}// ……
}

useDeferredValue 是一个 React Hook,可以让你延迟更新 UI 的某些部分。

在组件的初始渲染期间,返回的延迟值将与你提供的值相同。但是在组件更新时,React 将会先尝试使用旧值进行重新渲染(因此它将返回旧值),然后再在后台使用新值进行另一个重新渲染(这时它将返回更新后的值)

如果不使用 useDeferredValue : 每次按键都会立即强制整个列表以不可中断的方式进行重新渲染。

下面的例子中, fallback将不会再被触发。

import { Suspense, useState } from 'react';
import SearchResults from './SearchResults.js';export default function App() {const [query, setQuery] = useState('');return (<><label>Search albums:<input value={query} onChange={e => setQuery(e.target.value)} /></label><Suspense fallback={<h2>Loading...</h2>}><SearchResults query={query} /></Suspense></>);
}

-------------------------------------------------------------

主要针对的优化场景都是跟下图类似, input快速触发,导致渲染吃力时的应用场景

延迟一个值与防抖和节流之间有什么不同? 

在上述的情景中,你可能会使用这两种常见的优化技术:

  • 防抖 是指在用户停止输入一段时间(例如一秒钟)之后再更新列表。
  • 节流 是指每隔一段时间(例如最多每秒一次)更新列表。

虽然这些技术在某些情况下是有用的,但 useDeferredValue 更适合优化渲染,因为它与 React 自身深度集成,并且能够适应用户的设备。

与防抖或节流不同,useDeferredValue 不需要选择任何固定延迟时间。如果用户的设备很快(比如性能强劲的笔记本电脑),延迟的重渲染几乎会立即发生并且不会被察觉。如果用户的设备较慢,那么列表会相应地“滞后”于输入,滞后的程度与设备的速度有关。

此外,与防抖或节流不同,useDeferredValue 执行的延迟重新渲染默认是可中断的。这意味着,如果 React 正在重新渲染一个大型列表,但用户进行了另一次键盘输入,React 会放弃该重新渲染,先处理键盘输入,然后再次开始在后台渲染。相比之下,防抖和节流仍会产生不顺畅的体验,因为它们是阻*的:它们仅仅是将渲染阻塞键盘输入的时刻推迟了。

如果你要优化的工作不是在渲染期间发生的,那么防抖和节流仍然非常有用。例如,它们可以让你减少网络请求的次数。你也可以同时使用这些技术。

-------

参考: Quick Start – React

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

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

相关文章

eslint写jsx报错

eslint写jsx报错 ChatGPT提示 在写JSX时&#xff0c;ESLint可能会报出一些语法错误&#xff0c;这些错误通常是由于ESLint默认配置中不支持JSX语法导致的。为了解决这些错误&#xff0c;我们需要在ESLint配置文件中启用对JSX语法的支持。 首先&#xff0c;需要安装eslint-pl…

Python 集合

一、集合概念 集合&#xff08;set&#xff09;是一个无序的不重复元素序列。 二、集合的创建 可以使用大括号{}或者set方法创建集合&#xff0c;但是创建一个空集合必须使用set而不能使用空{},因为在python中空{}用于创建空字典。 1、set函数 set()函数创建一个无序不重复元…

时序分解 | MATLAB实现基于EWT经验小波变换的信号分解分量可视化

时序分解 | MATLAB实现基于EWT经验小波变换的信号分解分量可视化 目录 时序分解 | MATLAB实现基于EWT经验小波变换的信号分解分量可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 EWT经验小波变换 包含频谱相关系数 可直接运行 Matlab代码 1.可自由设置分量个数&…

OPENCV--调用GrabCut实现图像分割

# -*- coding:utf-8 -*- """ 作者:794919561 日期:2023/9/6 """ import cv2 import numpy as npclass Application:rect = (0,0,0,0)flag_rect = FalsestartX

SpringBoot整合Easy-ES操作演示文档

文章目录 SpringBoot整合Easy-ES操作演示文档1 概述及特性1.1 官网1.2 主要特性 2 整合配置2.1 导入POM2.2 Yaml配置2.3 EsMapperScan 注解扫描2.4 配置Entity2.5 配置Mapper 3 基础操作3.1 批量保存3.2 数据更新3.3 数据删除3.4 组合查询3.5 高亮查询3.6 统计查询 4 整合异常4…

106. 从中序与后序遍历序列构造二叉树

题目链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思想&#xff1a; 来看一下一共分几步&#xff1a; 第一步&#xff1a;如果数组大小为零的话&#xff0c;说明是空节点了。 第二步&#xff1a;如果不为空&#xff0c;那么取…

联发科3纳米芯片预计2024年量产,此前称仍未获批给华为供货

9月7日&#xff0c;联发科与台积电共同宣布&#xff0c;联发科首款采用台积电3纳米制程生产的天玑旗舰芯片开发进度顺利&#xff0c;已成功流片&#xff0c;预计将在2024年量产&#xff0c;并将于下半年正式上市。这款旗舰芯片并非今年上市的天玑9300。 据联发科总经理陈冠州介…

prize_p1

文章目录 解题过程代码审计思路问题解决数组绕过preg_match__destruct的触发修改phar文件以及签名phar://支持的后缀 题解方法一&#xff08;数组绕过&#xff09;方法二&#xff08;gzip绕过&#xff09; 解题过程 源代码 <META http-equiv"Content-Type" conte…

OpenLDAP | ubuntu 安装配置和汉化 phpldapadmin

仅做汉化配置记录&#xff0c;后续完善openLDAP Samba。 sudo apt-get install phpldapadmin -y sudo vi /etc/phpldapadmin/config.php $servers->setValue(server,host,127.0.0.1); //修改为你ldap的服务器地址 $servers->setValue(server,base,array(dcexample,dc…

Ubuntu中设置代理的方式

由于公司的局域网环境&#xff0c;只提供以代理服务器的方式上网&#xff0c;因此有必要记录一下设置代理的方式&#xff0c;方便以后使用。 系统设置代理&#xff1a; System Settings -> Network -> Network proxy Method选择Manual&#xff0c;然后设置 HTTP Proxy…

AI文本创作在百度App发文的实践

作者 | 内容生态端团队 导读 大语言模型&#xff08;LLM&#xff09;指包含数百亿&#xff08;或更多&#xff09;参数的语言模型&#xff0c;这些模型通常在大规模数据集上进行训练&#xff0c;以提高其性能和泛化能力。在内容创作工具接入文心一言AI能力后&#xff0c;可以为…

论文复现--lightweight-human-pose-estimation-3d-demo.pytorch(单视角多人3D实时动作捕捉DEMO)

分类&#xff1a;动作捕捉 github地址&#xff1a;https://github.com/Daniil-Osokin/lightweight-human-pose-estimation-3d-demo.pytorch 所需环境&#xff1a; Windows10&#xff0c;conda 4.13.0&#xff1b; 目录 conda环境配置安装Pytorch全家桶安装TensorRT&#xff08;…

C++设计模式_05_Observer 观察者模式

接上篇&#xff0c;本篇将会介绍C设计模式中的Observer 观察者模式&#xff0c;和前2篇模板方法Template Method及Strategy 策略模式一样&#xff0c;仍属于“组件协作”模式。Observer 在某些领域也叫做 Event 。 文章目录 1. 动机&#xff08; Motivation&#xff09;2. 代码…

spring boot 2.7 -> 3.0升级指南

spring boot提供一个版本迁移指南 2.7 -> 3.0

红帽 RHEL 源码限制成契机,AlmaLinux 获捐更可“做自己”

红帽在两个月前发布公告声称&#xff0c;将限制对 Red Hat Enterprise Linux (RHEL) 源代码的访问&#xff0c;早前曾报道&#xff0c;此举导致 AlmaLinux 、Rocky Linux 等 Linux 发行版未来发展严重受阻。 对于这一决策&#xff0c;AlmaLinux OS 基金会主席 Benny Vasquez 此…

few shot目标检测survey paper笔记(整体概念)

paper: Few-Shot Object Detection: A Comprehensive Survey (CVPR2021) 深度学习提高了目标检测的精度&#xff0c;但是它需要大量的训练数据。 对于训练数据集中没有见过的目标&#xff0c;是检测不了的&#xff0c;所以就限制了在实际中的应用。 如果想让模型去识别新的目标…

element-table 行的拖拽更改顺序(无需下载sortableJs

样例展示&#xff1a;vueelement 通过阅读element文档我们发现element并不提供拖拽相关的api 本博客通过element提供的行类名 注册函数 实现行与行的拖拽 1.设置el-table 的行样式类名 这里是用的是 function <el-table:data"outputData":row-class-name&qu…

Vue知识系列(3)每天10个小知识点

目录 系列文章目录Vue知识系列&#xff08;1&#xff09;每天10个小知识点Vue知识系列&#xff08;2&#xff09;每天10个小知识点 知识点**21. Vue不同生命周期**的概念、作用、原理、特性、优点、缺点、区别、使用场景**22. Vue 子组件和父组件执行顺序****23. created 和 mo…

H.265 视频在浏览器中的播放问题探究

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…

2023/9/12 -- C++/QT

作业 实现一个图形类&#xff08;Shape&#xff09;&#xff0c;包含受保护成员属性&#xff1a;周长、面积&#xff0c; 公共成员函数&#xff1a;特殊成员函数书写 定义一个圆形类&#xff08;Circle&#xff09;&#xff0c;继承自图形类&#xff0c;包含私有属性&#xf…