快捷導(dǎo)航

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

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

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

用法

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

當(dāng)用戶在輸入框中輸入時，我們希望輸入框能夠立即響應(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)用戶在搜索框中輸入查詢時，我們希望搜索框能夠立即更新，而搜索結(jié)果可能需要一些時間來獲取和顯示。

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. 動畫與數(shù)據(jù)加載

當(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)化性能和用戶體驗。

useDeferredValue 和防抖（debounce）

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

1. 目的

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

2. 使用場景

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

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

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

示例：

考慮一個實時搜索的場景：

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

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

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

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>
  );
}