认识

2024年02月24日

柏拉文

越努力，越幸运

一、认识

---

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

二、语法

---

在组件的顶层调用 useDeferredValue 来获取该值的延迟版本。

import { useState, useDeferredValue } from 'react';

function SearchPage() {
  const [value, setValue] = useState('');
  const deferredValue = useDeferredValue(value);
  
  return <div>{ deferredQuery }</div>
}

• value: 你想延迟的值，可以是任何类型

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