useMemo，useCallback还在傻傻分不清楚吗？

前言

前端工程师在项目中也是经常会使用到useMemo，useCallBack的，这是两个优化性能的方法，那么useMemo，useCallBack到底是什么呢？什么时候用呢？ 下面将给打击分享相关知识，希望对大家有所帮助同时欢迎讨论指出问题！

1.useMemo

• useMemo：会在在组件首次加载和重渲染期间执行，执行的函数需要和渲染相关的。

使用示例如下：

import React, {useMemo, useState} from "react";
function Memo (){
    const [count, setCount] = useState(0)
    const [bool, setBool] = useState(true)
    useMemo(() => {
        console.log('useMemo')
    }, [count])


    return (
        <div>
            <div>{count}</div>
            <div>{bool ? '正面' : '反面'}</div>
            <button onClick={() => setCount(count + 1)}>+1哟！</button>
            <button onClick={() => setBool(!bool)}>点击取反操作</button>
        </div>
    )
}
export default Memo;

 

详细解释：useMemo 类似于Vue的计算属性computed，监听某个值的变化，根据变化的值重新计算新值；通过点击触发改变count的值，组件会重新渲染且useMemo会监听count值的变化进行重新计算，但是当我触发改变bool的值，组件只进行了重新渲染但是useMemo没有重新计算并执行，因为当前useMomo监听的时count的变化，其他变化则不会去管；

 

2.useCallback

• useCallback：会在渲染期间执行，返回一个函数，useCallback是用来帮忙缓存函数的，当依赖项没有发生变化时，返回缓存的指针，当在依赖项变化的时候会更新，返回一个新的函数

使用示例：

import React, { useState, useCallback } from 'react';
export default function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  
  const handleClickButton1 = () => {setCount1(count1 + 1)};
  
  const handleClickButton2 = useCallback(() => {
    console.log('useCallback')
    setCount2(count2 + 1);
  }, [count2]);
  
  return (
    <div>
      <div>
        <Button onClick={handleClickButton1}>点击Button1</Button>
      </div>
      <div>
        <Button onClick={handleClickButton2}>点击Button2</Button>
      </div>
    </div>
  );
}

详细讲解：经过useCallback优化后，当Button2 是点击触发时自身时才会更新，Button1只要父组件更新后才会变更。

 

3.总结

相同点：

useCallback 和 useMemo 都是性能优化的手段，类似于类组件中的 shouldComponentUpdate，在子组件中使用 shouldComponentUpdate， 判定该组件的 props 和 state 是否有变化，从而避免每次父组件render时都去重新渲染子组件。

 

不同点：

useCallback 和 useMemo 的区别是useCallback返回一个函数，当把它返回的这个函数作为子组件使用时，可以避免每次父组件更新时都重新渲染这个子组件。