useMemo与useEffect + useState

  • Z时代
  • 2024-01-10
  • 分类：问答

是否有使用任何好处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

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

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

回答：

在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在这里使用。

以上是 useMemo与useEffect + useState 的全部内容， 来源链接： utcz.com/qa/428950.html

回到顶部