前端基于用户查询渲染列表：客户端过滤的状态优化问询

1. 双状态方案：简单直接，适合小数据量 #

你提到的维护原始数据data和过滤后数据filteredData的方案是完全可行的，也是很多场景下的常用选择：

• 页面初始化时从接口拉取原始数据存入data
• 用户输入过滤条件时，基于data做筛选，把结果存入filteredData
• 清空条件时，直接把filteredData重置为data

这种方式逻辑直白，容易理解，对于数据量不大（比如几百条以内）的场景，性能完全没问题，不用纠结复杂度。

2. 实时计算方案：更轻量，避免状态同步问题 #

如果想让代码更简洁、减少状态维护成本，更优的方式是只维护原始数据和过滤条件，实时计算过滤结果，核心是用useMemo缓存计算结果：

import { useState, useMemo } from 'react';

function RecipeList() {
  const [data, setData] = useState([]);
  // 维护过滤条件的状态，比如搜索关键词、分类选择
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('全部');

  // 用useMemo缓存过滤结果，只有依赖项变化时才重新计算
  const filteredData = useMemo(() => {
    return data.filter(item => {
      // 搜索匹配逻辑
      const matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
      // 分类匹配逻辑
      const matchesCategory = selectedCategory === '全部' || item.category === selectedCategory;
      return matchesSearch && matchesCategory;
    });
  }, [data, searchQuery, selectedCategory]); // 依赖项：原始数据+所有过滤条件

  // 渲染时直接用filteredData即可
  return (
    <div>
      <input 
        type="text" 
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="搜索食谱..."
      />
      <select
        value={selectedCategory}
        onChange={(e) => setSelectedCategory(e.target.value)}
      >
        <option value="全部">全部分类</option>
        <option value="主食">主食</option>
        <option value="甜点">甜点</option>
      </select>
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

这种方案的优势：

• 不需要手动同步data和filteredData，彻底避免两个状态不一致的bug
• 代码更简洁，所有过滤逻辑集中在一处，易维护
• 清空条件时，只需要重置过滤条件的状态（比如把searchQuery设为空），过滤结果会自动恢复成原始数据

3. 性能优化小技巧 #

如果你的数据量特别大（比如上万条），实时过滤可能会导致输入时卡顿，这时候可以给搜索输入加防抖处理（比如延迟300ms再执行过滤），或者回到双状态方案，只在用户停止输入后更新filteredData，平衡性能和体验。

内容的提问来源于stack exchange，提问作者Vienna J