REACT 实现过滤器

实现 React 过滤器的方法

使用状态管理过滤数据

在 React 中可以通过 useState 管理过滤状态和数据。定义一个状态变量存储原始数据，另一个状态变量存储过滤后的数据。通过输入框或其他交互元素更新过滤条件。

import { useState } from 'react';

function FilterComponent() {
  const [data] = useState(['Apple', 'Banana', 'Cherry', 'Date']);
  const [filter, setFilter] = useState('');

  const filteredData = data.filter(item => 
    item.toLowerCase().includes(filter.toLowerCase())
  );

  return (
    <div>
      <input 
        type="text" 
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
      />
      <ul>
        {filteredData.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

多条件过滤实现

对于需要多个过滤条件的情况，可以使用对象来管理多个过滤参数。通过组合过滤条件实现复杂筛选。

const [filters, setFilters] = useState({
  name: '',
  category: 'all',
  priceRange: [0, 100]
});

const filteredProducts = products.filter(product => {
  const nameMatch = product.name.toLowerCase().includes(filters.name.toLowerCase());
  const categoryMatch = filters.category === 'all' || product.category === filters.category;
  const priceMatch = product.price >= filters.priceRange[0] && product.price <= filters.priceRange[1];

  return nameMatch && categoryMatch && priceMatch;
});

使用 useMemo 优化性能

当处理大量数据时，使用 useMemo 可以避免不必要的重新计算过滤结果。

const filteredData = useMemo(() => {
  return largeDataSet.filter(item => 
    item.name.toLowerCase().includes(searchTerm.toLowerCase())
  );
}, [largeDataSet, searchTerm]);

自定义过滤钩子

将过滤逻辑封装成自定义 Hook 提高代码复用性。

function useFilter(data, filterFn) {
  const [filter, setFilter] = useState('');

  const filteredData = useMemo(() => {
    return data.filter(item => filterFn(item, filter));
  }, [data, filter, filterFn]);

  return [filteredData, filter, setFilter];
}

// 使用示例
function ProductList({ products }) {
  const [filteredProducts, filter, setFilter] = useFilter(
    products,
    (product, filter) => product.name.includes(filter)
  );

  // 渲染逻辑...
}

与后端结合的过滤

对于大数据集，考虑将过滤逻辑移到后端，通过 API 请求获取过滤结果。

const [filteredData, setFilteredData] = useState([]);

const handleFilterChange = async (filter) => {
  const response = await fetch(`/api/data?filter=${filter}`);
  const result = await response.json();
  setFilteredData(result);
};

每种方法适用于不同场景，根据项目需求选择合适的方式实现过滤器功能。简单前端过滤适合小型数据集，复杂或多条件过滤可能需要结合状态管理和性能优化，大数据集则建议采用后端过滤方案。