React 中高效实现数据过滤与排序的教程-js教程-PHP中文网

React 中高效实现数据过滤与排序的教程

碧海醫心

发布： 2025-09-14 10:35:08

原创

158人浏览过

React 中高效实现数据过滤与排序的教程

本教程旨在解决React应用中同时进行数据过滤和排序的常见挑战。通过避免useEffect中的无限循环、正确管理状态以及利用派生状态，我们将展示如何将数据获取、过滤和排序逻辑清晰地分离，从而实现高性能且可维护的数据处理流程。

在react应用中，当我们需要从后端获取数据，并根据用户交互（如筛选条件和排序规则）实时更新显示时，经常会遇到同时进行过滤和排序的需求。常见的错误做法可能导致无限循环或数据处理逻辑混乱。本文将详细介绍如何优雅地解决这一问题。

常见问题分析

原始代码中存在几个关键问题：

useEffect 中的无限循环： useEffect 依赖于 filteredProducts，但其内部又通过 setFilteredProducts 修改了 filteredProducts。每次 setFilteredProducts 被调用时，filteredProducts 的引用值都会改变，从而再次触发 useEffect，形成无限循环。
数据流不正确： handleSort 函数直接读取顶层的 filteredProducts 状态，而不是接收 handleDiscountFilters 处理后的结果。这意味着排序操作没有作用在已过滤的数据上。
不必要的 useEffect 触发： 对于过滤和排序这类基于现有数据进行的转换操作，通常不需要单独的 useEffect 来管理，尤其是在每次状态更新时都重新计算。

核心解决方案：派生状态与职责分离

解决上述问题的关键在于以下几点：

分离数据获取与数据处理： 使用 useEffect 仅用于执行副作用（如网络请求），将获取到的原始数据存储在状态中。
利用派生状态： 过滤和排序后的数据不应作为单独的状态存储，而应作为原始数据的“派生状态”进行计算。当原始数据或过滤/排序条件改变时，派生状态会自动重新计算。
纯函数处理逻辑： 过滤和排序的逻辑应封装在纯函数中，这些函数接收数据作为输入，并返回处理后的新数据，不产生副作用。

实现步骤与示例代码

我们将通过一个具体的例子来演示如何实现高效的数据过滤和排序。

1. 初始化原始数据

首先，我们需要一个状态来存储从后端获取的原始产品列表。数据获取操作应该只在组件挂载时执行一次。

import React, { useState, useEffect, useMemo } from 'react';
import axios from 'axios';
import { parseISO } from 'date-fns'; // 假设你使用 date-fns 解析日期

// 模拟获取查询参数的函数
const useQueryParams = () => {
    const params = new URLSearchParams(window.location.search);
    return {
        get: (key) => params.get(key)
    };
};

function ProductList() {
    const [products, setProducts] = useState([]); // 存储原始产品数据
    const queryParams = useQueryParams();

    // 仅在组件挂载时获取数据
    useEffect(() => {
        const fetchProducts = async () => {
            try {
                // 替换为你的实际 API 地址
                const response = await axios.get("https://api.example.com/products");
                setProducts(response.data);
            } catch (error) {
                console.error("Error fetching products:", error);
            }
        };
        fetchProducts();
    }, []); // 空依赖数组确保只运行一次

登录后复制

2. 获取过滤和排序条件

从 URL 查询参数或其他状态中获取用户选择的过滤和排序条件。

简篇AI排版

AI排版工具，上传图文素材，秒出专业效果！

554

查看详情

    const discountThreshold = queryParams.get('discount');
    const sortBy = queryParams.get('sort');

登录后复制

3. 定义过滤和排序逻辑

创建纯函数来处理过滤和排序的逻辑。这些函数不应依赖组件内部的状态，而是接收必要的参数。

    // 过滤函数：判断产品是否应该被包含
    const filterProduct = (product) => {
        if (discountThreshold) {
            return product.discount > parseFloat(discountThreshold);
        }
        return true; // 如果没有折扣过滤条件，则所有产品都通过
    };

    // 排序函数：根据 sortBy 值进行比较
    const sortProduct = (a, b) => {
        switch(sortBy) {
            case 'new' : return parseISO(b.created_at).getTime() - parseISO(a.created_at).getTime();
            case 'discount' : return b.discount - a.discount;
            case 'price_desc' : return b.price - a.price;
            case 'price_asc' : return a.price - b.price;
            default : return a.name.localeCompare(b.name);
        }
    };

登录后复制

4. 计算派生状态：过滤并排序后的产品列表

现在，我们可以利用 products 状态和过滤/排序条件来计算最终要显示的产品列表。为了优化性能，当 products、discountThreshold 或 sortBy 改变时才重新计算，我们可以使用 useMemo。

    const filteredAndSortedProducts = useMemo(() => {
        // 1. 先过滤
        let result = products.filter(filterProduct);

        // 2. 后排序
        // 注意：Array.prototype.sort() 会修改原数组。
        // 由于 filter 已经返回了一个新数组，这里直接在其结果上 sort 是安全的。
        // 如果是从原始数组开始排序，通常会先创建一个副本：[...products].sort(...)
        result.sort(sortProduct);

        return result;
    }, [products, discountThreshold, sortBy]); // 依赖项：当这些值变化时重新计算

登录后复制

5. 渲染结果

最后，渲染经过过滤和排序处理的产品列表。

    return (
        <div>
            <h1>产品列表</h1>
            {filteredAndSortedProducts.length === 0 && <p>没有找到符合条件的产品。</p>}
            <ul>
                {filteredAndSortedProducts.map(product => (
                    <li key={product.id}>
                        <h3>{product.name}</h3>
                        <p>价格: ${product.price}</p>
                        {product.discount > 0 && <p>折扣: {product.discount}%</p>}
                        <p>创建日期: {new Date(product.created_at).toLocaleDateString()}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default ProductList;

登录后复制

注意事项

Array.prototype.sort() 的副作用： sort() 方法会修改原始数组。在处理 React 状态时，应始终保持数据的不可变性。在本例中，由于 filter 方法已经返回了一个新数组，在其结果上调用 sort 是安全的，因为它不会影响原始的 products 状态。如果直接对 products 进行排序，应该先创建一个副本：[...products].sort(...)。
useMemo 的使用： useMemo 可以优化性能，避免在不相关的状态更新时重复执行昂贵的计算（如过滤和排序）。只有当其依赖项发生变化时，才会重新计算其值。
useEffect 的职责： useEffect 主要用于处理组件的副作用，如数据获取、订阅外部事件、DOM 操作等。避免在 useEffect 中执行不必要的计算或直接修改依赖其自身的状态。
查询参数管理： 示例中使用了简单的 useQueryParams，在实际应用中，你可能需要更健壮的路由库（如 React Router）来管理 URL 查询参数。
可扩展性： 随着过滤和排序条件的增加，你可以将 filterProduct 和 sortProduct 函数进一步模块化，甚至使用一个更通用的函数来组合多个过滤或排序条件。