useMemo与useEffect + useState [英] useMemo vs. useEffect + useState

问题描述

使用 useMemo (例如用于密集函数调用)而不是结合使用 useEffect 和 useState 是否有任何好处?

Are there any benefits in using useMemo (e.g. for an intensive function call) instead of using a combination of useEffect and useState?

这里有两个自定义钩子，它们乍一看完全一样，除了 useMemo 的返回值在第一次渲染时为 null :

Here are two custom hooks that work exactly the same on first sight, besides useMemo's return value being null on the first render:

import { expensiveCalculation } from "foo";

const useCalculate = someNumber => {
    const [result, setResult] = useState<number>(null);

    useEffect(() => {
        setResult(expensiveCalculation(someNumber));
    }, [someNumber]);

    return result;
};

useMemo

import { expensiveCalculation } from "foo";

const useCalculateWithMemo = someNumber => {
    return useMemo(() => {
        return expensiveCalculation(someNumber);
    }, [someNumber]);
};

每次参数 someNumber 更改时，两者都会计算结果， useMemo 的提示在哪里?

Both calculate the result each time their parameter someNumber changes, where is the memoization of useMemo kicking in?

推荐答案

useEffect 和 setState 会在每次更改时引起额外的渲染:第一个渲染将滞后"后面"使用过时的数据，然后它将立即与新数据一起排队等待其他渲染.

The useEffect and setState will cause extra renders on every change: the first render will "lag behind" with stale data and then it'll immediately queue up an additional render with the new data.

假设我们有:

function expensiveCalculation(x) { return x + 1; }; // Maybe I'm running this on a literal potato

让我们假设 someNumber 最初为0:

• useMemo 版本立即呈现 1 .
• useEffect 版本渲染 null ，然后在组件渲染效果运行后，更改状态，并使用 1 .

• The useMemo version immediately renders 1.
• The useEffect version renders null, then after the component renders the effect runs, changes the state, and queues up a new render with 1.

然后，如果我们将 someNumber 更改为2:

Then if we change someNumber to 2:

• useMemo 运行并呈现 3 .
• 运行 useEffect 版本，并再次渲染 1 ，然后触发效果，并使用正确的 3 值重新运行组件./li>

• The useMemo runs and 3 is rendered.
• The useEffect version runs, and renders 1 again, then the effect triggers and the component reruns with the correct value of 3.

就 expensiveCalculation 的运行频率而言，两者具有相同的行为，但是 useEffect 版本的渲染量是原来的两倍，这由于其他原因而对性能不利.

In terms of how often expensiveCalculation runs, the two have identical behavior, but the useEffect version is causing twice as much rendering which is bad for performance for other reasons.

此外，IMO的 useMemo 版本更加简洁易读.它不会引入不必要的可变状态，并且运动部件更少.

Plus, the useMemo version is just cleaner and more readable, IMO. It doesn't introduce unnecessary mutable state and has fewer moving parts.

因此，最好在这里使用 useMemo .

So you're better off just using useMemo here.

这篇关于useMemo与useEffect + useState的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！