React 基礎知識~渲染效能/ useTransition

• 假設我們要顯示大量數據，例如一萬條數據，在將下一個值輸入到輸入欄位時通常會出現延遲。

• 在這種情況下，當我們輸入一個值時，螢幕會顯示過濾後的資料。

• 但是，出現的一個問題是由於處理太多資料而延遲顯示下一個操作，例如在輸入欄位中輸入下一個值。

・src/Example.js

import { useState } from "react";

const generateDummyItem = (num) => {
  return new Array(num).fill(null).map((item, index) => `item ${index}`);
};

const dummyItems = generateDummyItem(10000);

const Example = () => {
  const [filterVal, setFilterVal] = useState("");

  const changeHandler = (e) => {
      setFilterVal(e.target.value);
  };

  return (
    <>
      <input type="text" onChange={changeHandler} />
      {isPending && <div>Loading...</div>}
      <ul>
        {dummyItems
          .filter((item) => {
            if (filterVal === "") return true;
            return item.includes(filterVal);
          })
          .map((item) => (
            <li key={item}>{item}</li>
          ))}
      </ul>
    </>
  );
};

export default Example;

• 為了解決這個問題，我們可以用 startTransition 包裝 setFilterVal 函數。

  const changeHandler = (e) => {
    startTransition(() => {
      setFilterVal(e.target.value);
    })
  };

• startTransition 使函數延遲在其中執行。

• 借助此功能，我們可以輕鬆地轉到輸入欄位中的下一個值。

・輸入前

・輸入後

以上是React 基礎知識~渲染效能/ useTransition的詳細內容。更多資訊請關注PHP中文網其他相關文章！