当前位置：首页 > React

react中如何筛选

2026-03-31 05:42:23React

筛选数据的方法

在React中筛选数据通常涉及对数组或对象集合进行过滤操作，结合状态管理实现动态更新。以下是几种常见方法：

基于状态和filter的筛选

const [data, setData] = useState(originalData);
const [filterValue, setFilterValue] = useState('');

const filteredData = data.filter(item => 
  item.name.toLowerCase().includes(filterValue.toLowerCase())
);

return (
  <div>
    <input 
      type="text" 
      onChange={(e) => setFilterValue(e.target.value)} 
    />
    {filteredData.map(item => <div key={item.id}>{item.name}</div>)}
  </div>
);

多条件筛选

react中如何筛选

const [filters, setFilters] = useState({
  category: '',
  priceRange: [0, 100]
});

const filteredData = data.filter(item => 
  (filters.category === '' || item.category === filters.category) &&
  (item.price >= filters.priceRange[0] && item.price <= filters.priceRange[1])
);

性能优化方案

对于大型数据集，可采用以下优化手段：

防抖处理

react中如何筛选

import { debounce } from 'lodash';

const handleFilterChange = debounce((value) => {
  setFilterValue(value);
}, 300);

<input onChange={(e) => handleFilterChange(e.target.value)} />

虚拟滚动技术

import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={500}
  width={300}
  itemSize={50}
  itemCount={filteredData.length}
>
  {({ index, style }) => (
    <div style={style}>
      {filteredData[index].name}
    </div>
  )}
</FixedSizeList>

高级筛选模式

复合筛选器组件

const FilterPanel = ({ onFilterChange }) => {
  const [filters, setFilters] = useState({});

  const handleChange = (name, value) => {
    const newFilters = { ...filters, [name]: value };
    setFilters(newFilters);
    onFilterChange(newFilters);
  };

  return (
    <div>
      <input 
        placeholder="Search..." 
        onChange={(e) => handleChange('search', e.target.value)}
      />
      <select onChange={(e) => handleChange('category', e.target.value)}>
        <option value="">All Categories</option>
        {categories.map(cat => 
          <option key={cat} value={cat}>{cat}</option>
        )}
      </select>
    </div>
  );
};

使用Reducer管理复杂状态

const filterReducer = (state, action) => {
  switch (action.type) {
    case 'SET_TEXT_FILTER':
      return { ...state, text: action.payload };
    case 'SET_CATEGORY':
      return { ...state, category: action.payload };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
};

const [filterState, dispatch] = useReducer(filterReducer, initialState);

标签: react