面试题：React中如何结合列表渲染优化与useMemo

Question

在React项目中，有一个包含大量数据项的列表需要渲染，并且列表项的渲染依赖一些计算结果。请描述如何通过结合列表渲染优化与useMemo来提升性能，给出关键代码示例并解释原理。

Answer 1

1. 列表渲染优化

在React中，渲染大量数据列表时，react - virtualized或react - window库是常用的优化手段。它们通过只渲染可见区域的列表项，减少了DOM的渲染数量，从而提升性能。

2. useMemo的作用

useMemo用于缓存计算结果，只有当依赖项发生变化时才重新计算。在列表项渲染依赖计算结果的场景下，使用useMemo可以避免不必要的重复计算。

3. 关键代码示例

假设我们有一个列表，列表项的渲染依赖于某个复杂计算函数expensiveCalculation：

import React, { useMemo } from 'react';
import { FixedSizeList } from'react - window';

// 模拟复杂计算函数
const expensiveCalculation = (item) => {
    // 复杂计算逻辑
    return item.value * 2;
};

const MyList = ({ data }) => {
    const memoizedCalculations = useMemo(() => {
        return data.map((item) => expensiveCalculation(item));
    }, [data]);

    const renderRow = ({ index, key }) => {
        const item = data[index];
        const result = memoizedCalculations[index];
        return (
            <div key={key}>
                {`Item: ${item.name}, Calculated Value: ${result}`}
            </div>
        );
    };

    return (
        <FixedSizeList
            height={400}
            rowCount={data.length}
            rowHeight={50}
            width={300}
        >
            {renderRow}
        </FixedSizeList>
    );
};

export default MyList;

4. 原理解释

• 列表渲染优化：react - virtualized或react - window库采用窗口化技术，只渲染当前视口内可见的列表项。这样大大减少了DOM元素的数量，从而提升了渲染性能，尤其是在数据量巨大的情况下。
• useMemo原理：useMemo接收一个函数和依赖项数组作为参数。当依赖项数组中的值没有变化时，useMemo返回上一次缓存的计算结果，避免了函数的重新执行。在上述代码中，只有当data发生变化时，memoizedCalculations才会重新计算，从而避免了不必要的重复计算，提升了性能。