React18中的useDeferredValue示例詳解

更新時(shí)間：2022年03月16日 11:16:00 作者：喵爸的小作坊

這篇文章主要介紹了React18中的useDeferredValue的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

有什么用？

lets you defer updating the less important parts of the screen

我們翻譯下，允許用戶推遲屏幕更新優(yōu)先級不高部分。

說“人話”就是，如果說某些渲染比較消耗性能，比如存在實(shí)時(shí)計(jì)算和反饋，我們可以使用這個(gè)Hook降低其計(jì)算的優(yōu)先級，使得避免整個(gè)應(yīng)用變得卡頓。

較多的場景可能就在于用戶反饋輸入上。比如百度的輸入框，用戶可能輸入的很快，相信大家還有個(gè)體會，就是我們使用輸入法的時(shí)候，中間還在選打哪個(gè)字呢，拼音或者輸入片段就已經(jīng)被搜索了。

這里就存在問題了，用戶連續(xù)輸入的時(shí)候，不停地在進(jìn)行計(jì)算或者調(diào)用后端服務(wù)，其實(shí)中間態(tài)的很多輸入片段的信息是無用的，既浪費(fèi)了服務(wù)資源，也因?yàn)?code>React應(yīng)用實(shí)時(shí)更新和JS的單線程特性導(dǎo)致其他渲染任務(wù)卡頓。那我們使用useDeferredValue來使用下，如何避免這個(gè)問題。

實(shí)操起來

還是沿用上期的代碼項(xiàng)目

import React, {useState, useEffect} from 'react';

const List = (props) => {
  const [list, setList] = useState([]);
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count => count + 1);
    setTimeout(() => {
      setList([
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
      ]);
    }, 500);
  }, [props.text]);
  return [<p>{'我被觸發(fā)了' + count + '次'}</p>
    , <ul>{list.map(item => <li>Hello:{item.name} value:{item.value}</li>)}</ul>]
};

export default function App() {
  const [text, setText] = useState("喵爸");

  const handleChange = (e) => {
    setText(e.target.value);
  };
  return (
    <div className="App">
      <input value={text} onChange={handleChange}/>
      <List text={text}/>
    </div>
  );
};

一般我們的代碼是這樣寫的。輸入框的值變化的時(shí)候，我們使用setTimeout來模擬下向后端請求數(shù)據(jù)，或者大量計(jì)算的耗時(shí)操作。這個(gè)時(shí)候只要輸入框的內(nèi)容發(fā)生變化就會觸發(fā)useEffect，我們用count來進(jìn)行計(jì)數(shù)。

\

我們每次的輸入或者變化，都會觸發(fā)一次更新，那我們接下來改造下。

我們僅需要修改外部組件，使得傳入List的Text變量是一個(gè)延遲更新的值。

細(xì)心的同學(xué)可以發(fā)現(xiàn)了，咦？！好像沒什么區(qū)別呀。其實(shí)原因在于，首先timeoutMs這個(gè)參數(shù)的含義是延遲的值允許延遲多久，事實(shí)上網(wǎng)絡(luò)和設(shè)備允許的情況下，React會嘗試使用更低的延遲。這一點(diǎn)是不是非常nice呀。

跟防抖的區(qū)別

估計(jì)有很多同學(xué)在一開始看到筆者這個(gè)場景的時(shí)候會去想，這就是防抖嗎？一開始故意賣了個(gè)關(guān)子，沒有提防抖的概念。這里跟防抖還是有比較大的區(qū)別的，那么不論機(jī)器快慢，網(wǎng)絡(luò)情況如何，始終會在用戶停止輸入后的固定之間才執(zhí)行。筆者直接放出兩者的比較，為了簡單起見，我們使用下ahooks的useDebounce，大家可以對比理解下。

import React, {useState, useEffect, useDeferredValue} from 'react';
import {useDebounce} from 'ahooks';
const List = (props) => {
  const [list, setList] = useState([]);
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count => count + 1);
    setTimeout(() => {
      setList([
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
        {name: props.text, value: Math.random()},
      ]);
    }, 500);
  }, [props.text]);
  return [<p>{'我被觸發(fā)了' + count + '次'}</p>,
    <ul>{list.map(item => <li>Hello:{item.name} value:{item.value}</li>)}</ul>]
};

export default function App() {
  const [text, setText] = useState("喵爸");
  const deferredText = useDeferredValue(text, {timeoutMs: 1000});
  const debouncedValue = useDebounce(text, { wait: 1000 });
  const handleChange = (e) => {
    setText(e.target.value);
  };
  return (
    <div className="App">
      <input value={text} onChange={handleChange}/>
      <List text={deferredText}/>
      <List text={debouncedValue}/>
    </div>
  );
};