javascript - useMemo 与 useEffect + useState

Question

使用 useMemo(例如，用于密集函数调用)而不是组合使用 useEffect 和 useState 有什么好处吗？

除了 useMemo 的返回值在第一次呈现时为 null 之外，这里有两个乍一看完全相同的自定义 Hook :

使用效果和使用状态

import { expensiveCalculation } from "foo";

function useCalculate(someNumber: number): number | null {
  const [result, setResult] = useState<number | null>(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 的内存在哪里开始？

Answer 1

useEffect 和 setState 将在每次更改时导致额外的渲染:第一个渲染将“滞后”于陈旧数据，然后它会立即排队额外的使用新数据渲染。

---

假设我们有:

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

假设 x 最初是 0:

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

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

• useMemo 运行并呈现 3。
• useEffect 版本运行，并再次呈现 1，然后效果触发，组件以正确的值 3 重新运行。

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

此外，useMemo 版本更清晰、更易读，IMO。它不会引入不必要的可变状态并且移动部件更少。

所以你最好在这里使用 useMemo。