React 的 useTransition：構建高性能搜索的五萬條記錄案例研究

作者：前端小石匠 2025-04-27 01:47:00

隨著應用復雜度的增加，性能可能會下降，尤其是在處理大數據集或密集用戶交互時。本文將重點介紹我們在 React 中實現簡單搜索過濾器時遇到的挑戰，以及如何通過優化組件來克服性能問題。

在構建現代 Web 應用時，確保流暢的用戶交互至關重要。React 憑借其強大的聲明式 UI 更新和基于組件的架構，提供了極大的靈活性。然而，隨著應用復雜度的增加，性能可能會下降，尤其是在處理大數據集或密集用戶交互時。本文將重點介紹我們在 React 中實現簡單搜索過濾器時遇到的挑戰，以及如何通過優化組件來克服性能問題。

問題：與大數據集的用戶交互

想象一個應用，它顯示一個龐大的用戶列表，用戶可以通過在搜索框中輸入來過濾該列表。乍一看，這似乎是一個簡單的任務，但隨著用戶數量的增加，即使是很小的低效也會導致嚴重的性能問題。我們最初構建了一個搜索過濾器組件，允許用戶通過姓名或電子郵件過濾 5,000 名用戶的列表。交互包括在輸入字段中輸入，并在用戶輸入時動態過濾列表。然而，性能很快就變得有問題。

原始方法

這是我們組件的第一個版本：

import React, { useState, useTransition } from"react";

// ?? 假用戶生成器
constgenerateUsers = (count: number) => {
const names = ["Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace", "Helen"];
returnArray.from({ length: count }, (_, i) => ({
    id: i,
    name: `${names[i % names.length]} ${i}`,
    email: `user${i}@example.com`,
  }));
};

const usersData = generateUsers(5000);

exportdefaultfunctionMassiveSearchFilter() {
const [query, setQuery] = useState("");
const [filteredUsers, setFilteredUsers] = useState(usersData);
const [isPending, startTransition] = useTransition();

consthandleSearch = (e: { target: { value: any; }; }) => {
    const value = e.target.value;
    setQuery(value);

    startTransition(() => {
      const lower = value.toLowerCase();
      const filtered = usersData.filter(
        (user) =>
          user.name.toLowerCase().includes(lower) ||
          user.email.toLowerCase().includes(lower)
      );
      setFilteredUsers(filtered);
    });
  };

consthighlight = (text: string, query: string) => {
    if (!query) return text;
    const index = text.toLowerCase().indexOf(query.toLowerCase());
    if (index === -1) return text;
    return (
      <>
        {text.slice(0, index)}
        <mark className="bg-pink-200 text-black">
          {text.slice(index, index + query.length)}
        </mark>
        {text.slice(index + query.length)}
      </>
    );
  };

return (
    <div className="min-h-screen bg-gray-100 p-6 font-sans">
      <div className="max-w-3xl mx-auto bg-white p-6 rounded-2xl border-2 border-pink-200 shadow-md">
        <h1 className="text-2xl font-bold text-pink-600 mb-4">
          ???? 大規模搜索過濾器（5,000 用戶）
        </h1>

        <input
          type="text"
          value={query}
          onChange={handleSearch}
          placeholder="搜索姓名或電子郵件..."
          className="w-full p-3 mb-4 border-2 border-pink-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400"
        />

        {isPending && (
          <div className="text-pink-500 italic mb-2 text-sm animate-pulse">
            ?? 加載結果中...
          </div>
        )}

        <div className="max-h-[500px] overflow-y-auto divide-y divide-pink-100 border-t border-pink-100">
          {filteredUsers.map((user) => (
            <div
              key={user.id}
              className="p-3 hover:bg-pink-50 transition-colors duration-150"
            >
              <p className="font-medium text-gray-800 text-base">
                {highlight(user.name, query)}
              </p>
              <p className="text-sm text-gray-500">
                {highlight(user.email, query)}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

面臨的挑戰

起初，一切似乎都很順利。搜索速度很快，結果幾乎瞬間出現。然而，當我們開始使用更大的數據集（例如 5,000 多名用戶）進行測試時，以下問題很快就變得明顯：

性能瓶頸：在搜索字段中快速輸入時，組件會顯著變慢。React 會在每次按鍵時重新渲染整個 5,000 名用戶的列表，導致 UI 更新延遲。
UI 凍結：由于搜索過濾器直接與輸入字段和用戶交互綁定，快速輸入或刪除文本會導致 UI 凍結，因為 React 被過濾和重新渲染數千個 DOM 節點的任務壓垮了。
過度依賴過濾：搜索輸入中的每次更改都會觸發對整個列表的過濾，即使用戶仍在輸入，這也是低效的。

優化過程

在識別出問題后，我們應用了幾種技術來提高性能和用戶體驗：

步驟 1：使用 react-window 進行虛擬化

渲染 5,000 多個項目是虛擬化的經典案例。我們決定使用 react-window，它允許 React 僅渲染視口中可見的項目。這意味著即使在大數據集的情況下，我們也不需要渲染整個列表，從而大大減少了瀏覽器的負載。

步驟 2：過濾結果的記憶化

通過使用 useMemo 鉤子，我們根據查詢對過濾結果進行了記憶化。這確保了過濾計算僅在查詢更改時發生，而不是在每次渲染時發生。

步驟 3：使用 startTransition 實現平滑的 UI 更新

useTransition 鉤子允許我們優先更新輸入字段，同時推遲過濾計算。這確保了 UI 在應用執行更昂貴的過濾任務時仍保持響應。

優化后的組件

以下是經過這些更改后的優化版本組件：

import React, { useState, useMemo, useTransition } from"react";
import { FixedSizeListasList } from"react-window";

constgenerateUsers = (count: number) => {
const names = ["Alice", "Bob", "Charlie", "David", "Eve", "Frank", "Grace", "Helen"];
returnArray.from({ length: count }, (_, i) => ({
    id: i,
    name: `${names[i % names.length]} ${i}`,
    email: `user${i}@example.com`,
  }));
};

const usersData = generateUsers(5000);

exportdefaultfunctionMassiveSearchFilter() {
const [query, setQuery] = useState("");
const [isPending, startTransition] = useTransition();

const filteredUsers = useMemo(() => {
    const lower = query.toLowerCase();
    return usersData.filter(
      (user) =>
        user.name.toLowerCase().includes(lower) ||
        user.email.toLowerCase().includes(lower)
    );
  }, [query]);

consthandleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    startTransition(() =>setQuery(value));
  };

consthighlight = (text: string, query: string) => {
    if (!query) return text;
    const index = text.toLowerCase().indexOf(query.toLowerCase());
    if (index === -1) return text;
    return (
      <>
        {text.slice(0, index)}
        <mark className="bg-pink-200 text-black">
          {text.slice(index, index + query.length)}
        </mark>
        {text.slice(index + query.length)}
      </>
    );
  };

constRow = ({ index, style }: { index: number; style: React.CSSProperties }) => {
    const user = filteredUsers[index];
    return (
      <div
        style={style}
        key={user.id}
        className="p-3 border-b border-pink-100 hover:bg-pink-50"
      >
        <p className="font-medium text-gray-800 text-base">
          {highlight(user.name, query)}
        </p>
        <p className="text-sm text-gray-500">{highlight(user.email, query)}</p>
      </div>
    );
  };

return (
    <div className="min-h-screen bg-gray-100 p-6 font-sans">
      <div className="max-w-3xl mx-auto bg-white p-6 rounded-2xl border-2 border-pink-200 shadow-md">
        <h1 className="text-2xl font-bold text-pink-600 mb-4">
          ???? 大規模搜索過濾器（虛擬化）
        </h1>

        <input
          type="text"
          value={query}
          onChange={handleSearch}
          placeholder="搜索姓名或電子郵件..."
          className="w-full p-3 mb-4 border-2 border-pink-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400"
        />

        {isPending && (
          <div className="text-pink-500 italic mb-2 text-sm animate-pulse">
            ?? 過濾中...
          </div>
        )}

        {filteredUsers.length === 0 ? (
          <div className="p-4 text-gray-500 italic text-center">未找到用戶。</div>
        ) : (
          <List
            height={500}
            itemCount={filteredUsers.length}
            itemSize={70}
            width="100%"
            className="border-t border-pink-100"
          >
            {Row}
          </List>
        )}
      </div>
    </div>
  );
}

結論

通過應用虛擬化、記憶化和UI 優先級策略，我們能夠顯著提高搜索過濾器組件的性能。用戶交互現在變得流暢且響應迅速，即使有數千個項目需要過濾。

這一經驗凸顯了在處理大數據集或復雜用戶交互時優化性能的重要性。React 的內置鉤子如 useMemo、useTransition 以及第三方庫如 react-window 可以極大地影響應用的用戶體驗，使其感覺更加流暢和高效。

代碼參考： https://github.com/paghar/react19-next15-trickysample

原文地址： https://dev.to/fpaghar/mastering-usetransition-in-react-building-a-high-performance-search-for-50k-record-case-study-1bdn作者： Fatemeh Paghar

責任編輯：武曉燕來源：前端小石匠

React 數據集優化