我们的一些开发人员最近提出了一个问题，什么时候我应该在 React 中使用 useMemo？这是一个非常好的问题。在本文中，我们将使用一种科学的方法，定义一个假设，并在 React 中使用现实生活中的基准对其进行测试。

请继续阅读，了解 useMemo对性能的影响。

什么是 useMemo？

UseMemo是 React 提供的一个钩子。这个钩子允许开发人员根据依赖列表来缓存变量的值。如果此依赖列表中的任何变量发生更改，React 将重新运行此数据的处理进程并重新缓存它。如果依赖列表中的变量值之前已经缓存过，则 React 将从缓存中获取值。

这对组件的重新渲染有重大影响。一旦组件重新渲染，它将从缓存中提取值，而不必一次又一次地循环一个数组或处理数据。

React对于 useMemo 是如何描述的？

如果我们看一下React 关于 useMemo的文档，它在应该何时使用它并没有被提及。他们只是简单地提到它的作用和使用方法。

这里的问题是，从什么角度来看 useMemo是有趣的？在我们看到使用 useMemo的性能优势之前，数据应该有多复杂或多大？开发者应该何时使用 useMemo？

假设

在我们开始实验之前，让我们先做一个假设。

让我们首先定义要执行的对象和处理的复杂度为 n。如果 n = 100，那么我们需要循环遍历一个由100个条目组成的数组，以获得 memo-ed 变量的最终值。

然后，我们还需要将两个操作分开。第一个动作是组件的初始渲染。在这种情况下，如果一个变量使用 useMemo或不使用 useMemo，它们都必须计算初始值。一旦完成了第一次渲染，用 useMemo进行随后的重新渲染(我们需要测量的第二个操作)可以从缓存中检索值，与非memo版本相比，性能上的优势应该是可见的。

在所有情况下，我预计在初始渲染期间会有大约5-10%的开销，以便去设置缓存并存储该值。当n<1000时，我希望看到useMemo的性能损失。对于n>1000的情况，我希望在使用useMemo重新渲染时看到类似或更好的性能，但由于额外的缓存算法，初始渲染仍然应该稍微慢一些。你的假设是什么？

基准测试设置

我们设置了一个小的 React 组件如下，它将生成一个复杂度为 n 的对象，复杂度定义为属性level。

import React from 'react';
const BenchmarkNormal = ({level}) => {
    const complexObject = {
        values: []
    };
    for (let i = 0; i <= level; i++) {
        complexObject.values.push({ 'mytest' });
    }
    return ( <div>Benchmark level: {level}</div>);
};
export default BenchmarkNormal;

这是我们正常的基准组件，我们还将为 useMemo做一个基准组件 BenchmarkMemo。

import React, {useMemo} from 'react';
const BenchmarkMemo = ({level}) => {
    const complexObject = useMemo(() => {
        const result = {
            values: []
        };
        
        for (let i = 0; i <= level; i++) {
            result.values.push({'mytest'});
        };
        return result;
    }, [level]);
    return (<div>Benchmark with memo level: {level}</div>);
};
export default BenchmarkMemo;

然后，我们在 App.js 中设置这些组件，以便在按下按钮时显示。我们还使用 React 的来提供渲染时间。

function App() {
    const [showBenchmarkNormal, setShowBenchmarkNormal] = useState(false);
    // Choose how many times this component needs to be rendered
    // We will then calculate the average render time for all of these renders
    const timesToRender = 10000;
    // Callback for our profiler
    const renderProfiler = (type) => {
        return (...args) => {
            // Keep our render time in an array
            // Later on, calculate the average time
            // store args[3] which is the render time ...
        };
    };
    // Render our component 
    return <p> {showBenchmarkNormal && [...Array(timesToRender)].map((index) => {
        return <Profiler id={`normal-${index}`} onRender={renderProfiler('normal')}>
            <BenchmarkNormal level={1} />
        </Profiler>;
    })}
    </p>;
}

如你所见，我们渲染组件10000次，并获取这些组件的平均渲染时间。现在我们需要一种机制来触发组件的按需重新渲染，同时不必重新计算 useMemo，因此我们不希望修改 useMemo的依赖列表中的任何值。

// Add a simple counter in state
// which can be used to trigger re-renders
const [count, setCount] = useState(0);
const triggerReRender = () => {
    setCount(count + 1);
};
// Update our Benchmark component to have this extra prop
// Which will force a re-render
<BenchmarkNormal level={1} count={count} />

为了保持结果的清晰，我们总是在开始测试之前从一个新的浏览器页面开始(除了重新渲染) ，以清除任何可能仍然在页面上并影响我们的结果的缓存。