快捷導(dǎo)航

React?Hooks之useDeferredValue鉤子用法示例詳解

更新時(shí)間：2023年09月15日 14:14:47 作者：羽旋杯水

useDeferredValue鉤子的主要目的是在React的并發(fā)模式中提供更流暢的用戶體驗(yàn),特別是在有高優(yōu)先級(jí)和低優(yōu)先級(jí)更新的情況下,本文主要講解一些常見的使用場景及其示例

用法

1. 響應(yīng)性輸入框與慢速列表

當(dāng)用戶在輸入框中輸入時(shí)，我們希望輸入框能夠立即響應(yīng)，而不受其他慢速組件的影響。

function App() {
  const [text, setText] = useState("hello");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 });
  return (
    <div className="App">
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <MySlowList text={deferredText} />
    </div>
  );
}

2. 搜索與結(jié)果顯示

當(dāng)用戶在搜索框中輸入查詢時(shí)，我們希望搜索框能夠立即更新，而搜索結(jié)果可能需要一些時(shí)間來獲取和顯示。

function SearchApp() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query, { timeoutMs: 1000 });
  return (
    <div>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <SearchResults query={deferredQuery} />
    </div>
  );
}

3. 動(dòng)畫與數(shù)據(jù)加載

當(dāng)頁面上有動(dòng)畫正在播放時(shí)，我們可能希望動(dòng)畫能夠流暢地播放，而不受數(shù)據(jù)加載的影響。

function AnimationApp() {
  const [data, setData] = useState(null);
  const deferredData = useDeferredValue(data, { timeoutMs: 3000 });
  return (
    <div>
      <LoadingAnimation />
      <DataComponent data={deferredData} />
    </div>
  );
}

這些示例展示了如何使用 useDeferredValue 鉤子在并發(fā)模式中優(yōu)化性能和用戶體驗(yàn)。

useDeferredValue 和防抖（debounce）

useDeferredValue 和防抖（debounce）在某些方面有相似之處，特別是它們都涉及到延遲某些操作的執(zhí)行。但它們的目的和實(shí)現(xiàn)方式是不同的。讓我們來詳細(xì)比較一下：

1. 目的

useDeferredValue：它的主要目的是在 React 的并發(fā)模式中提供更流暢的用戶體驗(yàn)。當(dāng)有高優(yōu)先級(jí)和低優(yōu)先級(jí)的更新時(shí)，它允許低優(yōu)先級(jí)的更新“滯后”于高優(yōu)先級(jí)的更新。
防抖：防抖的目的是減少函數(shù)的執(zhí)行頻率。當(dāng)連續(xù)觸發(fā)事件時(shí)，只有事件觸發(fā)的間隔超過指定的延遲時(shí)間，函數(shù)才會(huì)執(zhí)行。

2. 使用場景

useDeferredValue：常用于優(yōu)化性能，例如當(dāng)用戶在輸入框中輸入時(shí)，我們希望輸入框能夠立即響應(yīng)，而其他可能需要時(shí)間來處理的操作（如搜索結(jié)果的顯示）可以稍后執(zhí)行。
防抖：常用于減少連續(xù)觸發(fā)的事件的函數(shù)調(diào)用，例如搜索框的實(shí)時(shí)搜索、窗口大小調(diào)整、滾動(dòng)事件等。

3. 實(shí)現(xiàn)方式：

useDeferredValue：是 React 的并發(fā)模式中的一個(gè)鉤子，它與 React 的渲染機(jī)制緊密結(jié)合。
防抖：通常通過 JavaScript 的 setTimeout 和 clearTimeout 來實(shí)現(xiàn)。

示例：

考慮一個(gè)實(shí)時(shí)搜索的場景：

使用防抖：當(dāng)用戶在搜索框中輸入時(shí)，我們可能會(huì)使用防抖來確保只有在用戶停止輸入一段時(shí)間后才發(fā)送搜索請(qǐng)求。

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}
const handleSearch = debounce((query) => {
  // 發(fā)送搜索請(qǐng)求
}, 300);

使用 useDeferredValue：我們可以使輸入框立即響應(yīng)用戶輸入，而搜索結(jié)果的顯示可以稍后進(jìn)行，以提供更流暢的用戶體驗(yàn)。

function SearchApp() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);
  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <SearchResults query={deferredQuery} />
    </div>
  );
}