当前位置：首页 > React

react filter如何使用

2026-02-11 21:53:11React

React 中的 `filter` 使用方法

filter 是 JavaScript 数组方法，用于筛选符合条件的数据。在 React 中，常用于列表渲染前的数据过滤或状态更新。以下是几种典型场景的使用方法：

过滤列表并渲染

通过 filter 筛选数组后，用 map 渲染结果：

react filter如何使用

const items = [
  { id: 1, name: 'Apple', category: 'fruit' },
  { id: 2, name: 'Carrot', category: 'vegetable' }
];

function ItemList() {
  const filteredItems = items.filter(item => item.category === 'fruit');

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

结合状态管理

通过用户输入动态过滤数据：

react filter如何使用

import { useState } from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 999 },
  { id: 2, name: 'Phone', price: 599 }
];

function ProductList() {
  const [minPrice, setMinPrice] = useState(0);

  const filteredProducts = products.filter(
    product => product.price >= minPrice
  );

  return (
    <div>
      <input 
        type="number" 
        value={minPrice}
        onChange={(e) => setMinPrice(Number(e.target.value))}
      />
      <ul>
        {filteredProducts.map(product => (
          <li key={product.id}>
            {product.name} - ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

多条件过滤

组合多个条件进行复杂筛选：

const books = [
  { title: 'React Guide', author: 'A', year: 2022 },
  { title: 'JavaScript Basics', author: 'B', year: 2020 }
];

function BookFilter() {
  const [searchTerm, setSearchTerm] = useState('');
  const [yearFilter, setYearFilter] = useState(null);

  const filteredBooks = books.filter(book => {
    const matchesSearch = book.title.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesYear = yearFilter ? book.year >= yearFilter : true;
    return matchesSearch && matchesYear;
  });

  // 渲染逻辑...
}

性能优化

对于大型数据集，考虑以下优化手段：

使用 useMemo 缓存过滤结果
分页或虚拟滚动减少渲染量
防抖处理输入过滤

import { useMemo, useState } from 'react';

function LargeList({ data }) {
  const [filter, setFilter] = useState('');

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

  // 渲染逻辑...
}