面试题：React高阶组件参数传递在复杂业务场景下的优化与设计

Question

在一个大型电商项目中，有多个页面需要展示商品列表。为了复用代码，打算使用高阶组件 `withProductList` 来处理商品列表数据的获取与传递。商品列表数据可能来自不同的API接口，且不同页面展示商品列表的排序规则、筛选条件也各不相同。请设计一套合理的参数传递机制，确保高阶组件能灵活应对这些复杂需求，同时要考虑性能优化，例如避免不必要的重新渲染。请详细描述设计思路并给出核心代码片段。

Answer 1

设计思路

1. 参数传递：
   • 为了使 withProductList 高阶组件能适应不同的API接口，我们可以通过参数传递API的URL。
   • 对于排序规则和筛选条件，以函数的形式传递。这样可以灵活定制不同页面的逻辑。
2. 性能优化：
   • 使用React.memo来包裹被高阶组件包裹的组件，避免不必要的重新渲染。同时，在高阶组件内部，对数据获取和处理的逻辑进行优化，比如使用缓存机制，避免重复获取相同的数据。

核心代码片段

import React from 'react';
import { useState, useEffect } from'react';

// 高阶组件
const withProductList = (WrappedComponent) => {
    return (props) => {
        const { apiUrl, sortFunction, filterFunction } = props;
        const [productList, setProductList] = useState([]);

        useEffect(() => {
            const fetchData = async () => {
                const response = await fetch(apiUrl);
                const data = await response.json();
                let filteredData = data;
                if (filterFunction) {
                    filteredData = filterFunction(filteredData);
                }
                let sortedData = filteredData;
                if (sortFunction) {
                    sortedData = sortedData.sort(sortFunction);
                }
                setProductList(sortedData);
            };
            fetchData();
        }, [apiUrl, sortFunction, filterFunction]);

        return <WrappedComponent productList={productList} {...props} />;
    };
};

// 示例被包裹组件，使用React.memo进行性能优化
const ProductListPage = React.memo(({ productList }) => {
    return (
        <div>
            <h1>商品列表</h1>
            <ul>
                {productList.map(product => (
                    <li key={product.id}>{product.name}</li>
                ))}
            </ul>
        </div>
    );
});

// 使用高阶组件
const EnhancedProductListPage = withProductList(ProductListPage);

// 调用示例
const App = () => {
    const apiUrl = 'https://example.com/api/products';
    const sortFunction = (a, b) => a.price - b.price;
    const filterFunction = (products) => products.filter(product => product.inStock);
    return (
        <EnhancedProductListPage
            apiUrl={apiUrl}
            sortFunction={sortFunction}
            filterFunction={filterFunction}
        />
    );
};

export default App;