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";

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

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

  return result;
}

使用备忘录

import { expensiveCalculation } from "foo";

function useCalculateWithMemo(someNumber: number): number {
    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 值重新运行.

• 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屋！