面试题：React中useMemo Hook在性能优化中的基础应用

Question

在React项目中，假设我们有一个组件需要渲染一个复杂的列表，列表项的计算较为耗时。请使用useMemo Hook来优化该组件的性能，描述你的思路并给出代码示例。

Answer 1

思路

1. 计算函数：将复杂的列表项计算逻辑封装在一个函数中。
2. useMemo：使用useMemo Hook来缓存这个计算结果。useMemo会在其依赖项发生变化时重新计算，否则返回缓存的值，从而避免不必要的重复计算。

代码示例

import React, { useMemo } from 'react';

// 模拟一个复杂的计算函数
const calculateComplexList = () => {
    // 这里可以是复杂的计算逻辑，例如数据过滤、映射等
    let result = [];
    for (let i = 0; i < 1000; i++) {
        result.push(i * i);
    }
    return result;
};

const ComplexListComponent = () => {
    // 使用useMemo缓存计算结果
    const complexList = useMemo(() => calculateComplexList(), []);

    return (
        <ul>
            {complexList.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
};

export default ComplexListComponent;

在上述代码中，calculateComplexList函数模拟了复杂的列表项计算。useMemo Hook传入该计算函数以及一个空数组作为依赖项，这意味着只有在组件第一次渲染时会执行calculateComplexList，后续渲染不会重复执行，除非依赖项数组中的值发生变化。然后通过map方法将计算后的列表渲染出来。