React之useMemo和useCallback

这里默认你对React有一定的了解，并且知道React的更新机制，比如什么是state和props

一、WHY

我们为什么要用？useMemo和useCallback只应作用于性能优化。如果代码在没有它的情况下无法运行，请找到根本问题并首先修复它，然后再使用。大部分时候你可能用不到它们，或者说没必要用。但是当我们想仅仅在依赖发生改变时进行调用计算或者函数，就很有必要了

二、useMemo和useCallback的作用

• useMemo：缓存计算的结果，也就是第一个参数的返回值，依赖值更新时才会从新进行计算（如果是单纯的函数调用，每次state/props更新都会导致函数从新计算，所以useMemo是性能优化）

const [num, setNum] = useState<number>(0);
/**
 * memodResult：函数的返回值
 * 第一个参数是一个有返回值的函数
 * 第二个参数是一个数组，数组中的值发生变化时，函数才会重新执行
 */
const memodResult = useMemo(() => {
	let result = num;
	/**
	 * 进行一些昂贵的计算
	 * ...
	 */
	
	return result
// 如果是[],每次返回值就是0
}, [num])
return (
	<div className={styles.wrap}>
		<button onClick={() => {
			setNum(num + 1)
		}}>btn</button>
		<h1>{memodResult}</h1>
	</div>
);

在初次渲染时，useMemo 返回不带参数调用 函数 的结果。

在接下来的渲染中，如果依赖项没有发生改变，它将返回上次缓存的值；否则将再次调用 函数，并返回最新结果。

• useCallback：和useMemo很像，但是缓存的是整个函数

//father
const [num, setNum] = useState<number>(0);

const callbackFun = useCallback(() => {
	console.log(num)
}, [num])

return (
	<div className={styles.wrap}>
		<button onClick={() => {
			setNum(num + 1)
		}}>btn</button>
		<SubPage callbackFun={callbackFun} />
	</div>
);

// SubPage
const { callbackFun } = props;

return (
	<div>SubPage
		<button onClick={() => {
			callbackFun()
			console.log(callbackFun)
			/**
			* ƒ () {
			*    console.log(num);
  			* }
			*/
		}}>SubPageBtn</button>
	</div>
);

你可能会想，和我直接传递函数没有什么区别，为什么要这么麻烦呢？
是的，通常情况完全没有必要，这么做是为了缓存这个函数，也就是说只有依赖项更新时，才会更新这个函数。

上边的例子中，我们在父组件里按钮点击两次，num变成了2，在SubPage中调用这个方法num也是2。也就是useCallback的函数进行了两次更新，得到最新的函数。
这时候我们进行一下修改,去掉依赖的值

const callbackFun = useCallback(() => {
	console.log(num)
}, [])

这时候我们更新num之后，再次调用callbackFun()，会发现值还是0，useCallback的函数并没有进行更新，缓存了下来。

三、使用场景

由于React的渲染机制，父组件更新时，所以的子组件都会更新，如果我们不希望这么做，希望在自己特定的情况下进行更新，那么可以这样。

// 父组件
const[num, setNum] = useState<number>(0);
const [num2, setNum2] = useState<number>(0);

/**
 * 缓存的是函数，如果依赖不变那么函数不会更新
 */
const callbackFun = useCallback(() => {
	console.log(num);
}, [num]);

return (
	<div className={styles.wrap}>
		<button
			onClick={() => {
				setNum(num + 1);
			}}
		>
			btn
		</button>
		<button
			onClick={() => {
				setNum2(num2 + 1);
			}}
		>
			btn2
		</button>
		<SubPage callbackFun={callbackFun} />
	</div>
);

//子组件
import { memo } from "react";

function SubPage(props: { callbackFun: any; }) {
	const { callbackFun } = props;

	console.log('SubPage')
	return (
		<div>SubPage
			<button onClick={() => {
				callbackFun()
			}}>SubPageBtn</button>
		</div>
	);
}

export default memo(SubPage);

子组件我们使用memo进行了包裹，他的作用就是props没有变化的时候不更新，即使父组件进行了多次的更新。

当父组件的num进行更新时，我们更新了callbackFun，同时也会更新SubPage，这时候我们拿到了想要的结果，同时就减少了子组件的更新次数。

四、你应该在所有地方添加 useMemo 或者useCallback吗？

如果你是一个简单的网页，并且大多数交互都很粗糙（例如替换页面或整个部分），则通常不需要缓存。另一方面，如果你的应用更像是一个绘图编辑器，并且大多数交互都是精细的（如移动形状），那么你可能会发现缓存非常有用。