react filter如何使用
React Filter 的基本用法
在 React 中实现过滤功能通常涉及状态管理和数组操作。通过结合 useState 和数组的 filter 方法，可以轻松实现数据筛选。
定义一个状态来存储原始数据和过滤条件：
const [items, setItems] = useState([...]);
const [filterText, setFilterText] = useState('');使用数组的 filter 方法根据条件筛选数据：
const filteredItems = items.filter(item =>
item.name.toLowerCase().includes(filterText.toLowerCase())
);输入框绑定与实时过滤
创建受控输入组件来触发过滤：
<input
type="text"
value={filterText}
onChange={(e) => setFilterText(e.target.value)}
/>渲染过滤后的结果：
{filteredItems.map(item => (
<div key={item.id}>{item.name}</div>
))}多条件过滤实现
对于更复杂的过滤需求，可以扩展过滤逻辑：
const [filters, setFilters] = useState({
text: '',
category: 'all'
});
const filteredItems = items.filter(item => {
const matchesText = item.name.toLowerCase().includes(filters.text.toLowerCase());
const matchesCategory = filters.category === 'all' || item.category === filters.category;
return matchesText && matchesCategory;
});性能优化技巧
对于大型数据集，考虑使用 useMemo 优化过滤计算：
const filteredItems = useMemo(() => {
return items.filter(item =>
item.name.toLowerCase().includes(filterText.toLowerCase())
);
}, [items, filterText]);自定义过滤钩子
封装可复用的过滤逻辑：
function useFilter(items, filterFn) {
const [filter, setFilter] = useState('');
const filteredItems = useMemo(() => {
return items.filter(item => filterFn(item, filter));
}, [items, filter, filterFn]);
return [filteredItems, setFilter];
}使用示例：
const [filteredItems, setFilter] = useFilter(items, (item, filter) => {
return item.name.includes(filter);
});
