useCallback和useMemo用法区别

1.useCallback
作用：在依赖项发生变化的时候，返回一个新的函数引用。
需求：
1）请求数据的接口需要放在useEffect外面，因为要将该方法传递给子组件
2）在conditions发生变化时，自动执行该函数
3）只有在conditions发生变化时，才会重新render子组件中的内容。

代码如下：

const fetchPoolList = useCallback(
    () => {
      apis.getGoodsPoolList(conditions).then(res => {
        const { ret } = res
        if (ret === '0' && res.data) {
          setData(data => ({ ...data, ...res.data, load: LOAD_STATUS.SUCCESS }))
        } else {
          message.error('暂无商品池信息')
          setData({ poolList: [], load: LOAD_STATUS.FAILED })
        }
      }).catch(ex => {
        setData({ poolList: [], load: LOAD_STATUS.FAILED })
        message.error('商品池信息获取错误')
      })
    },
    [conditions]
  )
  // 当入参变化时再一次请求数据
  useEffect(() => {
    fetchPoolList()
  },
  [fetchPoolList]
  )

{/* 子组件 */}
<Mytest fetchPoolList={fetchPoolList} />

//test.js
function Mytest (props) {
  const { fetchPoolList } = props
  console.log('重新渲染了')
  fetchPoolList()
  return (
    <div>我是测试</div>
  )
}
export default Mytest

运行1:改变conditions
执行函数，打印‘重新渲染’

运行2:改变data(另一个state)
函数不执行，但是还是会打印‘重新渲染’

改进方法：
//test.js
function Mytest (props) {
  const { fetchPoolList } = props
  console.log('重新渲染了')
  fetchPoolList()
  return (
    <div>我是测试</div>
  )
}
export default React.memo(Mytest)

React.memo会对props中的内容进行浅比较，如果不一样就会重新渲染，否则不会执行。
执行结果：函数不执行，不打印‘重新渲染’

运行3:setConditions(相同的conditions)
在setConditions的时候，由于是将一个新的对象赋值给conditions，所以会重新渲染。
执行结果：执行函数，打印‘重新渲染’

总结：useCallback需要结合React.memo(函数组件)方法 React.pureComponent（class组件）一起使用。

2.useMemo
作用： 与useCallback类似，只是返回一个值，而不是函数的引用，所以应用更广泛。

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

const userInfo = {
  // ...
  age: count,
  name: 'Jace'
}

return <UserCard userInfo={userInfo}>

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

const userInfo = useMemo(() => {
  return {
    // ...
    name: "Jace",
    age: count
  };
}, [count]);

return <UserCard userInfo={userInfo}>

对比以上几种情况，很明显的上面的 userInfo 每次都将是一个新的对象，无论 count 发生改变没，都会导致 UserCard 重新渲染，而下面的则会在 count 改变后才会返回新的对象。

useMemo其他用处：可以将一些复杂的运算放在里面，只有依赖发生变化的时候才会重新计算。