【react】useCallback和useMemo的真正区别和配合使用实例

今天认真看了useCallback和useMemo
并且在网上找了很多相关资料,
发现传抄严重而且很多理解有问题
so
有问题自己写一下~

pre：引入

import {useCallback,useMemo} from 'react';

1.子组件里测试useMemo

//useMemo
function Example6(props){
  // 当props.count发生改变的时候，会触发事件，
  // 自动触发，不需调用
  useMemo(() => doSomething(props.count), [props.count])
  function doSomething(count){
    console.log('useMemo',count);
  }
  return <div>
      <div>
          <p><span>{props.count}</span></p>

          <button onClick={props.onClick}>
            +1
          </button>
      </div>
  </div>;
}

2.父组件里使用useCallback

//useCallback
function TestExample6(){

  const [count, setCount] = useState(0);

  //从Example6可以看到，memo不需要调用，自动含有浅比较的过程
  //而useCallback需要调用，
  //那么，useCallback有什么意义呢？
  //意义就在于，执行的时候，并不是每次都新建memoizedCallback方法，
  //实现函数缓存，不用反复新建，解决了同一性问题
  //可以和memo搭配使用
  const memoizedCallback =  useCallback(()=>{changeData(count)},[count]);
  function changeData(data){
    console.log('setCount',data +1)
    setCount(data+1)
  };

  return <div>
      <div>
          <Example6 count={count} onClick={memoizedCallback}></Example6>
      </div>
  </div>;

}

最后调用组件就可以了

function App() {
  return (
    <div className="App">
      <TestExample6 />

    </div>
  );
}
export default App;

总结：

• useCallback实现函数缓存，不会反复新建
• useMemo不需要调用，会根据浅比较自动执行
• useMemo作为callback的箭头函数部分是返回一个函数，而useCallback是执行一个函数
• 一般采用useCallback函数缓存的功能，保持值的同一性，然后再用useMemo的浅比较配合完成组件功能