React Hooks之memo useMemo useCallback

一 memo useMemo与useCallback关系:

useCallback和useMemo的参数跟useEffect一致，他们之间最大的区别有是useEffect可用于处理副作用，而前两个hooks不能。useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。

1 useMemo缓存的是一个值，

2 useCallback缓存的是一个函数，是对一个单独的props值进行缓存，

 

3 memo缓存的是组件本身，是站在全局的角度进行优化.

memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有useState，useReducer 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。

memo 接受第二个参数 compare，compare 返回值为 true 不渲染，false 则渲染

import React, { useState, memo, useMemo, useCallback } from 'react'

const Child = (props) => {
  console.log('子组件 Child');
  return (
    <div>子组件 Child</div>
  );
};

/* 比较 prevProps 与 nextProps */
// 如果为 true 表示该组件不需要重新渲染，如果为 false 表示重新渲染该组件
const compare = (prevProps, nextProps) => {
  console.log(prevProps, nextProps);
  if (prevProps.count === nextProps.count) {
    return false
  } else {
    return true
  }
}
const ChildMemo = memo((props) => {
  console.log('子组件 ChildMemo');
  return (
    <div>子组件 ChildMemo</div>
  );
}, compare);

const App = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <div> count:{count}</div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}>
        按钮新增
      </button>

      <Child count={count} />

      <ChildMemo count={count} />
    </div>
  );
};

export default App

 

推荐阅读：

useMemo与useCallback:https://www.cnblogs.com/guanghe/p/14178723.html

useMemo与useCallback使用指南：https://blog.csdn.net/sinat_17775997/article/details/94453167