React Hooks —— useCallback

作者：oasis

useCallback

useCallback 用于在 React 重新渲染的时候保证函数引用的是同一个。

这里主要学习两点：

通过 useCallback 防止子组件重新渲染
在 useCallback 中获取最新的 state

下面的代码演示了 useCallback 的防止子组件重新渲染的功能。

jsx

import { memo, useCallback, useState } from "react";

const Son = memo(({ fnProp }) => {
	console.log("render n");
	return <div onClick={fnProp}>son</div>;
});

const Parent = () => {
	const [state, setState] = useState(0);
	const handler = useCallback(() => {
		console.log("handler state is:", state);
	}, []);
	return (
		<div>
			<Son fnProp={handler} />
			<div onClick={() => setState((state) => state + 1)}>Click {state}</div>
		</div>
	);
}

运行下面代码，点击 Click 的元素，点击次数并为增加，主要是因为 count 函数的引用没变，count 中的 state 因为闭包，保存了以前的值。所以需要给 useCallback 增加 state 的依赖。