React 基础知识~渲染性能/ useTransition-js教程-PHP中文网

React 基础知识~渲染性能/ useTransition

Susan Sarandon

发布： 2024-10-18 08:35:29

原创

851 人浏览过

假设我们要显示大量数据，例如一万条数据，在将下一个值输入到输入字段时通常会出现延迟。
在这种情况下，当我们输入一个值时，屏幕会显示过滤后的数据。
但是，出现的一个问题是由于处理太多数据而延迟显示下一个操作，例如在输入字段中输入下一个值。

・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 Basics~Render Performance/ useTransition

・输入后
React Basics~Render Performance/ useTransition

以上是React 基础知识~渲染性能/ useTransition的详细内容。更多信息请关注PHP中文网其他相关文章！