useMemo与useEffect + useState

Question

是否有使用任何好处useMemo（例如，对于密集的函数调用），而不是使用的组合useEffect和useState？

这是两个自定义钩子，它们的乍看效果完全相同，除了useMemo的返回值null位于第一个渲染器上：

useEffect和useState

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

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

  return result;
};

useMemo

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

https://codesandbox.io/s/nkxolxwzkj

两者都计算每次“道具”更改时，useMemo踢球的“缓存” 在哪里？

现实世界中有哪些示例useMemo？

Answer 1

我认为在选择它们时，您应该考虑两个要点。

1. 函数调用的时间。

useEffect组件渲染后调用，因此您可以从中访问 DOM。例如，如果您想通过 refs 访问 DOM 元素，这一点很重要。

2. 语义保证。

useEffect保证如果依赖项没有改变它就不会被触发。useMemo不提供此类保证。

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

useEffect+useState可用于控制更新。甚至可以打破循环依赖并防止无限更新循环。

Answer 2

我想说，除了异步性质之外，它们的设计方式可能存在一些差异。

useEffect是一个集体调用，无论异步与否，它都是在所有组件渲染后收集的。

useMemo是本地调用，只和这个组件有关。您可以将其视为useMemo另一个赋值语句，其优点是使用上次更新的赋值。

这意味着，useMemo是比较紧急的，然后useLayoutEffect是最后的useEffect。

Answer 3

在useEffect和setState每个变化都会导致额外的呈现：第一个将呈现“落后”与陈旧的数据，然后它会立即排队，用新的数据的附加渲染。

假设我们有：

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

假设numberProp最初为0：

• 该useMemo版本立即呈现1。
• 该useEffect版本呈现null，组件呈现然后后的效果运行，改变了状态，和队列了一个新的与渲染1。

然后，如果我们更改numberProp为2：

• 该useMemo运行和3呈现。
• 该useEffect版本运行，并呈现1再次，那么效果触发，并与正确值的组件重播3。

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

另外useMemo，IMO 的版本更干净，更易读。它不会引入不必要的可变状态，并且运动部件更少。

因此，最好只useMemo在这里使用。