小编jav*_*ipt的帖子

实际上,useCallback和useMemo有什么区别?

也许我误会了一些东西,但是useCallback Hook每次重新渲染时都会运行。

我传递了输入-作为useCallback的第二个参数-不可更改的常量-但返回的备忘录化回调在每次渲染时仍运行我的昂贵计算(我很确定-您可以在下面的代码段中自行检查)。

我已经将useCallback更改为useMemo,并且useMemo可以按预期工作,在传递的输入更改时运行。并真正记住了昂贵的计算。

现场示例:

'use strict';

const { useState, useCallback, useMemo } = React;

const neverChange = 'I never change';
const oneSecond = 1000;

function App() {
  const [second, setSecond] = useState(0);
  
  // This  expensive function executes everytime when render happens:
  const calcCallback = useCallback(() => expensiveCalc('useCallback'), [neverChange]);
  const computedCallback = calcCallback();
  
  // This  executes once
  const computedMemo = useMemo(() => expensiveCalc('useMemo'), [neverChange]);
  
  setTimeout(() => setSecond(second + 1), oneSecond);
  
  return `
    useCallback: ${computedCallback} times |
    useMemo: ${computedMemo} |
    App …
Run Code Online (Sandbox Code Playgroud)

reactjs

38
推荐指数
4
解决办法
5436
查看次数

标签 统计

reactjs ×1