当前位置：首页 > React

react filter如何使用

2026-01-23 17:53:24React

react filter 的基本用法

在 React 中，filter 通常用于筛选数组数据，常见于列表渲染或数据处理场景。filter 是 JavaScript 数组的原生方法，但在 React 中结合状态管理会非常高效。

const filteredItems = items.filter(item => item.condition === true);

结合状态管理的示例

通过 useState 管理数据，再通过 filter 实现动态筛选：

import { useState } from 'react';

function FilterExample() {
  const [items, setItems] = useState([
    { id: 1, name: 'Apple', category: 'Fruit' },
    { id: 2, name: 'Carrot', category: 'Vegetable' }
  ]);
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item =>
    item.name.toLowerCase().includes(filter.toLowerCase())
  );

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

多条件筛选的实现

通过组合条件实现复杂筛选逻辑：

const filteredItems = items.filter(item => {
  const matchesName = item.name.toLowerCase().includes(nameFilter.toLowerCase());
  const matchesCategory = item.category === categoryFilter;
  return matchesName && matchesCategory;
});

性能优化建议

对于大型数据集，可通过 useMemo 缓存筛选结果避免重复计算：

import { useMemo } from 'react';

const filteredItems = useMemo(() => {
  return items.filter(item => item.name.includes(filter));
}, [items, filter]);

与搜索功能结合

典型搜索筛选的实现模式：

function SearchList({ data }) {
  const [searchTerm, setSearchTerm] = useState('');

  const results = data.filter(item =>
    item.text.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <>
      <SearchBar onSearch={setSearchTerm} />
      <List items={results} />
    </>
  );
}

react filter如何使用