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);
});