useMemo与useEffect + useState

Question

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

这里有两个自定义钩子，除了在第一次渲染时useMemo的返回值是null之外，它们的工作原理完全相同：

​

​

useEffect和useState

import { expensiveCalculation } from "foo";

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

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

  return result;
}

useMemo

import { expensiveCalculation } from "foo";

function useCalculateWithMemo(someNumber: number): number {
    return useMemo(() => {
        return expensiveCalculation(someNumber);
    }, [someNumber]);
};

每次它们的参数someNumber改变时，都会计算结果，useMemo的记忆在哪里？

Answer 1

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

假设我们有：

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

假设someNumber最初为0：

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

对新渲染进行排队

如果我们将someNumber更改为2：

• useMemo运行，3 is rendered.
• The useMemo运行，并再次渲染useEffect，然后效果触发，组件使用正确的3.

值重新运行

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

另外，useMemo版本更干净，可读性更好。它不会引入不必要的可变状态，并且具有更少的移动部分。

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

Answer 2

我想说的是，除了异步的本质之外，它们的设计方式可能会有所不同。

useEffect是一个集合调用，不管是不是异步调用，它是在所有组件呈现后收集的。

useMemo是一个本地调用，它只与这个组件有关。您可以将useMemo看作是另一个赋值语句，它具有使用上次更新中的赋值的好处。

这意味着，useMemo更紧急，其次是useLayoutEffect，最后是useEffect。

Answer 3

我认为在两者之间进行选择时，您应该考虑两个要点。

调用函数时的

1. 时间。

在组件呈现之后调用的useEffect，因此您可以从它访问DOM。例如，如果你想通过refs访问DOM元素，这一点很重要。

1. 语义保证。

useEffect保证，如果依赖关系没有改变，它将不会被触发。useMemo不提供这样的保证。

正如React documentation中所述，您应该将useMemo视为纯粹的优化技术。即使您将useMemo替换为常规函数调用，您的程序也应该继续正常工作。

可以使用useEffect + useState来控制更新。甚至可以打破循环依赖，防止无限的更新循环。