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