react实现数组过滤
数组过滤的基本方法
在React中实现数组过滤通常使用filter方法，结合状态管理（如useState）动态更新过滤结果。以下是一个基础示例：
import React, { useState } from 'react';
function FilterExample() {
const [searchTerm, setSearchTerm] = useState('');
const items = ['Apple', 'Banana', 'Cherry', 'Date'];
const filteredItems = items.filter(item =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="Search..."
onChange={(e) => setSearchTerm(e.target.value)}
/>
<ul>
{filteredItems.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}复杂对象数组的过滤
当处理包含对象的数组时，可以通过指定属性进行过滤：
const products = [
{ id: 1, name: 'Laptop', category: 'Electronics' },
{ id: 2, name: 'Shirt', category: 'Clothing' }
];
const filteredProducts = products.filter(product =>
product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
product.category.toLowerCase().includes(searchTerm.toLowerCase())
);多条件过滤实现
通过组合多个条件实现高级过滤逻辑：
const [filters, setFilters] = useState({
name: '',
category: '',
priceRange: [0, 100]
});
const filteredData = products.filter(item => {
const matchesName = item.name.toLowerCase().includes(filters.name.toLowerCase());
const matchesCategory = filters.category ? item.category === filters.category : true;
const matchesPrice = item.price >= filters.priceRange[0] && item.price <= filters.priceRange[1];
return matchesName && matchesCategory && matchesPrice;
});性能优化技巧
对于大型数据集，考虑以下优化方案：
- 使用
useMemo缓存过滤结果避免重复计算 - 对输入框添加防抖处理（debounce）
- 分页展示过滤结果
const filteredItems = useMemo(() => {
return largeDataSet.filter(item =>
// 过滤条件
);
}, [largeDataSet, searchTerm]);与后端结合的过滤
当数据量极大时，建议将过滤逻辑移至后端：
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const response = await fetch(`/api/items?q=${searchTerm}`);
setData(await response.json());
};
const debounceTimer = setTimeout(fetchData, 300);
return () => clearTimeout(debounceTimer);
}, [searchTerm]);
