如何优化大量React元素数组的过滤，解决输入卡顿问题？

嘿，我完全懂你碰到的这个糟心问题——当要过滤的元素量特别大时，每次输入字符都触发同步过滤，直接把JS主线程占满了，UI自然就卡得动不了。你想通过异步解决思路是对的，之前用async-await没成功大概率是没找对正确的异步姿势，我给你拆解几个可行的方案：

一、先从「防抖+异步队列」入手（大部分场景够用） #

首先第一步要减少过滤的触发次数——用户输入时每敲一个字符就过滤一次太浪费性能，我们用防抖让过滤逻辑在用户停输入300ms后再执行；然后把过滤逻辑放到异步任务队列里，让主线程先处理完输入UI的更新，再去跑过滤。

先写个简单的防抖函数，或者用lodash的debounce也行：

const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

然后修改你的组件代码：

import React, { useState, useEffect, useCallback } from "react";
import "./styles.css";
import { Button } from "@material-ui/core";

const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

export default function MyFilterTextComponent(props) {
  const [filterText, setFilterText] = useState("");
  const [filteredElements, setFilteredElements] = useState(props.dataToFilter);
  const { dataToFilter } = props;

  // 用useCallback缓存防抖函数，避免每次渲染重新创建
  const debouncedFilter = useCallback(debounce((text) => {
    // 用setTimeout把过滤放到宏任务队列，让UI先更新
    setTimeout(() => {
      const result = dataToFilter.filter(currWord => currWord.includes(text));
      setFilteredElements(result);
    }, 0);
  }, 300), [dataToFilter]);

  useEffect(() => {
    debouncedFilter(filterText);
  }, [filterText, debouncedFilter]);

  const handleFilterTextChange = event => {
    setFilterText(event.target.value);
  };

  return (
    <div className="App">
      <label htmlFor="filterText">Filter text:</label>
      <input type="text" id="filterText" name="filterText" onChange={handleFilterTextChange} />
      <br />
      <br />
      {filteredElements.map((element, index) => (
        <Button key={index}>{element}</Button>
      ))}
    </div>
  );
}

这里的关键是：

• 防抖减少了不必要的过滤触发
• setTimeout(..., 0)把过滤逻辑扔到下一个事件循环，让主线程先处理完输入框的UI更新，再执行过滤，不会阻塞输入

二、超大数据量？用Web Workers彻底隔离线程 #

如果你的元素量已经大到上万甚至更多，上面的方法还是不够的话，就用Web Workers——把过滤逻辑放到独立的线程里执行，完全不占用主线程，UI操作就绝对不会卡了。

先创建一个worker文件filter.worker.js：

// 监听主线程发来的消息
self.onmessage = (e) => {
  const { dataToFilter, filterText } = e.data;
  // 在worker线程里执行过滤
  const result = dataToFilter.filter(item => item.includes(filterText));
  // 把结果发回主线程
  self.postMessage(result);
};

然后修改组件代码：

import React, { useState, useEffect, useCallback, useRef } from "react";
import "./styles.css";
import { Button } from "@material-ui/core";

const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

export default function MyFilterTextComponent(props) {
  const [filterText, setFilterText] = useState("");
  const [filteredElements, setFilteredElements] = useState(props.dataToFilter);
  const { dataToFilter } = props;
  // 用ref保存worker实例，避免重复创建
  const workerRef = useRef(null);

  useEffect(() => {
    // 创建worker实例
    workerRef.current = new Worker('./filter.worker.js');
    // 接收worker返回的过滤结果
    workerRef.current.onmessage = (e) => {
      setFilteredElements(e.data);
    };

    // 组件卸载时终止worker
    return () => {
      workerRef.current.terminate();
    };
  }, []);

  const debouncedFilter = useCallback(debounce((text) => {
    if (workerRef.current) {
      // 给worker发送要过滤的数据和关键词
      workerRef.current.postMessage({ dataToFilter, filterText: text });
    }
  }, 300), [dataToFilter]);

  useEffect(() => {
    debouncedFilter(filterText);
  }, [filterText, debouncedFilter]);

  const handleFilterTextChange = event => {
    setFilterText(event.target.value);
  };

  return (
    <div className="App">
      <label htmlFor="filterText">Filter text:</label>
      <input type="text" id="filterText" name="filterText" onChange={handleFilterTextChange} />
      <br />
      <br />
      {filteredElements.map((element, index) => (
        <Button key={index}>{element}</Button>
      ))}
    </div>
  );
}

为啥你之前的async-await没生效？ #

大概率是你直接在useEffect里用async，但filter是同步函数，await对它没用——await只认Promise。比如你之前可能写了这种无效代码：

// 没用的写法：filter是同步的，await不会让它异步执行
useEffect(async () => {
  const result = await dataToFilter.filter(currWord => currWord.includes(filterText));
  setFilteredElements(result);
}, [dataToFilter, filterText])

要让过滤真的异步，得把它包在Promise或者setTimeout里才行，就像第一个方案里那样。

内容的提问来源于stack exchange，提问作者Simon Long