React 18中新钩子 useDeferredValue 使用

React是一个流行的用于构建用户界面的JavaScript库,它不断发展以为开发人员提供优化性能的工具。

React 18中引入的此类工具之一是useDeferredValue钩子,它旨在通过优先渲染更新来提高应用程序的性能。

useDeferredValue钩子是什么?

useDeferredValue钩子是React性能优化工具集中相对较新的补充。

它在处理异步数据获取(如网络请求或从API加载数据)时特别有用。

useDeferredValue的主要目的是,在立即呈现最重要的部分的同时,推迟对您的应用程序中不太关键的部分的更新。

这可以通过避免用户界面组件呈现延迟而大大提高应用程序的感知性能。

useDeferredValue的基本用法

useDeferredValue钩子的基本用法涉及包装状态值并创建其延迟版本。下面是一个简单的示例:

import { useState, useDeferredValue } from 'react';  function MyComponent() {const [data, setData] = useState([]);const deferredData = useDeferredValue(data);   // ...
}

在这个例子中,我们有一个状态变量data,它可能会用异步操作填充数据。

通过使用useDeferredValue,我们创建了deferredData,这是data的一个版本,React 会单独优先渲染。

这种分离可确保您的 UI 中的关键部分及时更新,而非关键更新(如渲染列表)可以推迟以降低性能影响。

使用

首次渲染组件时,延迟值将与您传递的值相同。

更新组件时,延迟值将落后于最新值。这意味着 React 会首先使用旧的延迟值重新渲染组件,然后尝试在后台用新延迟值重新渲染它。

下面是一个例子,说明这在什么情况下有用:

想象一下,您有一个搜索栏,当您输入时会获取搜索结果。您开始输入“a”,React 使用加载后备项渲染搜索栏。“a”的搜索结果最终返回,React 使用结果重新渲染搜索栏。

// app.js
import { Suspense, useState } from 'react';
import SearchResults from './SearchResults.js';  export default function App() {const [query, setQuery] = useState('');return (<><label>  Search songs:<input value={query} onChange={e => setQuery(e.target.value)} />  </label><Suspense fallback={<h2>Loading...</h2>}><SearchResults query={query} /></Suspense></>);
}
// searchResult.js
import { fetchData } from './data.js';
export default function SearchResults({ query }) {if (query === '') {return null;}const songs = use(fetchData(`/search?q=${query}`));if (songs.length === 0) {return <p>No matches for <i>"{query}"</i></p>;}return (<ul>{songs.map(song => (<li key={song.id}>  {song.title} ({song.year})</li>))}</ul>);
}  function use(promise) {if (promise.status === 'fulfilled') {return promise.value;} else if (promise.status === 'rejected') {throw promise.reason;} else if (promise.status === 'pending') {throw promise;} else {promise.status = 'pending';promise.then(result => {promise.status = 'fulfilled';promise.value = result;},reason => {promise.status = 'rejected';promise.reason = reason;},);throw promise;}
}
// data.jslet cache = new Map();   export function fetchData(url) {if (!cache.has(url)) {cache.set(url, getData(url));}return cache.get(url);
}  async function getData(url) {if (url.startsWith('/search?q=')) {return await getSearchResults(url.slice('/search?q='.length));} else {throw Error('Not implemented');}
}async function getSearchResults(query) {// Add a fake delay to make waiting noticeable.await new Promise(resolve => {setTimeout(resolve, 500);});const allSongs = [{id: 1,title: "Bohemian Rhapsody",year: 1975},{id: 2,  title: "Imagine",year: 1971},{id: 3,title: "Hotel California",year: 1976},{id: 4,title: "Stairway to Heaven",  year: 1971},{id: 5,title: "Let It Be",year: 1970},{id: 6,title: "Abbey",year: 1976},{id: 7,title: "A Hard Day's Night",year: 2012  }];const lowerQuery = query.trim().toLowerCase();return allSongs.filter(album => {const lowerTitle = album.title.toLowerCase();return (lowerTitle.startsWith(lowerQuery) || lowerTitle.indexOf(' ' + lowerQuery) !== -1  )});
}

一种常用的替代UI模式涉及推迟更新结果列表并在新结果可用之前持久显示先前结果。

要实现这种方法,可以利用 useDeferredValue 钩子提供查询的延迟版本,因为它在组件层次结构中传播。

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

现在,您将搜索查询编辑为“ab”。React 会首先使用旧的延迟值重新渲染搜索栏,即“a”的搜索结果。 然后,它会尝试使用新的延迟值重新渲染搜索栏,即“ab”的搜索结果。

这意味着用户不会再看到加载后备,即使“ab”的搜索结果需要很长时间才能返回。

换句话说,延迟值允许您立即渲染UI,即使您正在等待异步数据。 这可以通过避免不必要的加载后备来帮助提高用户体验。

useDeferredValue的好处

  1. 性能提升: 组件或数据的延迟加载和渲染可以导致更快的初始页面加载、降低资源使用和优化性能,从而带来更好的用户体验。

  2. 高效的资源利用: 通过按需加载所需内容,您可以减少不必要的 API 调用、最大限度地减少内存和 CPU 使用,并优化应用程序的资源利用。

  3. 渐进式加载和错误隔离: 延迟值策略支持渐进式加载以实现更高的响应性 UI,并提供更好的错误隔离,确保应用程序的一部分错误不会破坏整个用户体验。

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

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

相关文章

SEO 分步教程:初学者掌握的 8 个简单基础知识

如果您刚刚开始使用搜索引擎优化 &#xff08;SEO&#xff09;&#xff0c;那么分步 SEO 教程是有序的。在这一点上&#xff0c;你可能已经听说过一些基本术语&#xff0c;如关键词研究和页面优化。但是&#xff0c;您如何应用迄今为止收集的所有知识呢&#xff1f; 如果您刚刚…

SpringBoot中使用SpringEvent业务解耦神器实现监听发布事件同步异步执行任务

场景 SpringBoot中使用单例模式ScheduledExecutorService实现异步多线程任务(若依源码学习)&#xff1a; SpringBoot中使用单例模式ScheduledExecutorService实现异步多线程任务(若依源码学习)-CSDN博客 设计模式-观察者模式在Java中的使用示例-环境监测系统&#xff1a; 设…

windbg下载安装傻瓜式教程

前言 windbg是分析windows上面分析程序的利器 &#xff0c;Windbg是微软出品的强大调试器&#xff0c;是分析软件异常的利器&#xff0c;Windbg之于windows就像GDB之于linux。&#xff08;好了&#xff0c;我也就不讲废话了&#xff0c;我想你也只想知道最简单的安装方式...&am…

线性代数基础【4】线性方程组

第四章 线性方程组 一、线性方程组的基本概念与表达形式 二、线性方程组解的基本定理 定理1 设A为mXn矩阵,则 (1)齐次线性方程组AX0 只有零解的充分必要条件是r(A)n; (2)齐次线性方程组AX0 有非零解(或有无数个解)的充分必要条件是r(A)&#xff1c;n 推论1 设A为n阶矩阵,则…

你为什么还在用Promise.all?

请停止在JavaScript中使用Promise.all() 什么是JavaScript中的Promise 如果您偶然发现这篇文章,那么您可能已经熟悉了promise。 但是,对于那些JavaScript新手来说,让我们来详细说明一下。 从本质上讲,Promise对象表示异步操作的最终完成或失败。 有趣的是,当创建promise时,其值…

halcon 标定板像素当量的标定

背景&#xff1a;当镜头不是远心镜头时&#xff0c;FA镜头没法知道一个像素的尺寸。 1、标定板信息 标定板7*7&#xff0c;圆的直径是1.25mm&#xff0c;两个圆的距离是2.5mm&#xff0c;求出每排两两圆心距的像素距离&#xff0c;然后平均值。两点的真实距离为D&#xff0c;…

Spring Boot - Application Events 的发布顺序_ApplicationEnvironmentPreparedEvent

文章目录 Pre概述Code源码分析 Pre Spring Boot - Application Events 的发布顺序_ApplicationEnvironmentPreparedEvent 概述 Spring Boot 的广播机制是基于观察者模式实现的&#xff0c;它允许在 Spring 应用程序中发布和监听事件。这种机制的主要目的是为了实现解耦&#…

Tensorflow2.0笔记 - Tensor的数据索引和切片

主要涉及的了基础下标索引"[]",逗号",",冒号":",省略号"..."操作&#xff0c;以及gather,gather_nd和boolean_mask的相关使用方法。 import tensorflow as tf import numpy as nptf.__version__tensor tf.random.uniform([1,5,5,3],…

电脑可以连接网络但浏览器无法访问部分或全部网页

啾咪&#xff01;离大谱了&#xff0c;电脑一段时间没有用&#xff0c;最近打开却发现可以连接网络但是无法访问部分网页&#xff08;如CSDN&#xff09;&#xff0c;显示如下&#xff1a; 有三种解决方法&#xff1a; &#xff08;1&#xff09;清除DNS缓存 步骤&#xff1a;…

归并排序例题——逆序对的数量

做道简单一点的题巩固一下 归并排序实现步骤 将整个区间 [l, r] 划分为 [l, mid] 和 [mid1, r]。 递归排序 [l, mid] 和 [mid1, r]。 将左右两个有序序列合并为一个有序序列。 题目描述 给定一个长度为 n 的整数数列&#xff0c;请计算数列中的逆序对的数量。 逆序对的定义…

基础篇_开发命令行程序(输入输出,类型、变量、运算符,条件语句,循环语句,方法,package与jar)

文章目录 一. 输入输出1. System.out2. System.in3. Scanner4. 变量名5. 关键字 二. 类型、变量、运算符1. 字符与字符串字符值与字符串值转义字符文本块 2. 类型何为类型数字类型字符类型 3. 变量与运算符变量运算符 4. 练习 - 房贷计算器Math.pow()数字格式化查阅 Javadoc 三…

git 的安装

git 的安装 在我们开始使用 Git 前&#xff0c;需要将它安装在我们的电脑上。即便已经安装&#xff0c;最好将它升级到最新的版本。 我们可以通过软件包或者其它安装程序来安装&#xff0c;或者下载源码编译安装。 本文只介绍通过在 windows 上安装软件包的方式&#xff0c;其…