React中useMemo和useCallback的区别

一句话来解释，useMemo是缓存值的，useCallback是缓存函数的。
一、useMemo：

接收两个参数，第一个参数是个函数，第二个是依赖项。返回一个memoized值，只有当它的某个依赖项改变时才重新计算 memoized 值，初始化的时候也会调用一次，这种优化有助于避免在每次渲染时都进行高开销的计算。

import React, { useState, useMemo } from 'react';export default function hook() {const [count, setCount] = useState(1)const [total, setTotal] = useState(1)const memoizedValue = useMemo(() => {console.log("只有total变了我才会变")// 返回的值是total+1return total + 1}, [total]);return (<div><button onClick={() => setCount(count + 1)}>count + 1</button><button onClick={() => setTotal(total + 1)}>total + 1</button><div>count is {count}</div><div>total is {total}</div><div>memoizedValue is {memoizedValue}</div></div>)
}

二、useCallback

接收两个参数，第一个参数是个函数，第二个是依赖项。返回一个memoized函数，依赖项不变的情况下，memoizedCallback的引用不变。即：useCallback会被缓存，从而达到渲染性能优化的目的。

父组件：

export default function LearnUseCallBack() {const [num, setNum] = useState(1);const [count, setCount] = useState(1);const add = useCallback(() => {console.log("你好");setNum(num + 1);}, [count]);return (<div><div>缓存函数</div><button onClick={add}>num + 1</button><button onClick={() => setCount(count + 1)}>count + 1</button>num ==> {num}count ==> {count}<ChildComponent add={add}></ChildComponent></div>);
}

子组件：

import React, { useState, useCallback } from "react";// react.memo会做一层浅比较/*** 因为我们每次触发render 都会重新执行一遍当前函数* 所以说，我们的方法会重新赋值，react.memo时进行浅比较* 重新赋值的方法和之前的方法，引用不一样，所以react.memo* 会认为是一个新的对象，所以会重新渲染*/
const ChildComponent = React.memo((props) => {console.log("每次render都会触发吗？", props);return (<div><div>你好我是子组件</div></div>);
});

注：若add方法不被缓存，因为add是引用类型，则组件刷新时add函数每次渲染时都指向不同的引用类型，若将add传给子组件，即使子组件使用了memo包裹，子组件还是每次都会刷新的，影响性能！我们只希望与子组件相关的值变化了之后子组件才去重新渲染。