useMemo和useCallback的区别和使用

转载

wx60d4764eb475e 2022-05-05 09:52:57

文章标签 javascript 前端开发语言缓存简书 文章分类 Java 后端开发

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

将“创建”函数和依赖项添加到参数上使用备注，它仅会在某个依赖项改变时才重新计算备忘录值。这种优化避免在每次渲染时都进行高开销的计算。

也就是说useMemo可以让函数在某个依赖项改变的时候才运行，这可以避免很多额外的开销。举个例子：

不使用useMemo

function Example() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
 
    const getNum = useMemo(() => {
        return Array.from({length: count * 100}, (v, i) => i).reduce((a, b) => a+b)
    }, [count])
 
    return <div>
        <h4>总和：{getNum()}</h4>
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;
}

使用useMemo后，成为count作为依赖值传递进去，此时仅当count变化时才会重新执行getNum。

useCallback

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

将内联变量函数和依赖项替换为参数回调使用，回调返回该变量函数的备注，版本，该变量函数仅在某个依赖项改变时才会更新。当您将函数传递给经过优化的并使用引用替代性去避免非必要渲染（例如shouldComponentUpdate）的子组件时，则非常有用。

看起来似乎和useMemo差不多，我们来看看这两个有什么异同：

useMemo和useCallback接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值，区别在于useMemo返回的是函数运行的结果，useCallback返回的是函数。

useCallback（fn，deps）相当于useMemo（（）=> fn，deps）

使用场景

顶部上面所说的，当你把某些函数传递给经过优化的并使用引用替代性去避免非必要渲染（例如shouldComponentUpdate）的子组件时，则非常有用。而父组件传递一个函数给子组件的时候，由于父组件的更新会导致该函数重新生成从而传递给子组件的函数引用发生了变化，这就会导致子组件也会更新，而很多时候子组件的更新是没必要的，所以我们可以通过useCallback来缓存该函数，然后传递给子组件。举个例子：

function Parent() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
 
    const getNum = useCallback(() => {
        return Array.from({length: count * 100}, (v, i) => i).reduce((a, b) => a+b)
    }, [count])
 
    return <div>
        <Child getNum={getNum} />
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;
}

const Child = React.memo(function ({ getNum }: any) {
    return <h4>总和：{getNum()}</h4>
})