1. Brief description of useCallback hook function
The useCallback hook function is a bit like useMemo, which can back up information, and useCallback is just a backup function. Unless some parameters change, it will not re-run the code in it.
2. useCallBack example
// 父级组件
const UseCallBackDemo: React.FC = () => {
const [num, setNum] = useState<number>(0);
const [dark, setDark] = useState<boolean>(false);
const getList = () => {
return [num, num + 1, num + 2];
};
const themeStyles = {
backgroundColor: dark ? "black" : "white",
color: dark ? "white" : "black",
};
return (
<div style={
themeStyles}>
<input
value={
num}
onChange={
(e) => {
setNum(+e.target.value);
}}
></input>
<button
onClick={
() => {
setDark((prve) => (prve = !prve));
}}
>
改变主题
</button>
<UseCallBackList lists={
getList} />
</div>
);
};
// UseCallBackList 组件
type params = {
lists: Function;
};
const UseCallBackList: React.FC<params> = ({
lists }) => {
const [list, setList] = useState<any>([]);
useEffect(() => {
console.log("params change");
setList(lists());
}, [lists]);
return list.map((item: number, index: number) => <p key={
index}>{
item}</p>);
};
Problem: After running the above code, when we enter a number in the input box, and then check the log of the console, we can see the printed params changeinformation, which means that the hook UseCallBackListof the component useEffecthas monitored the change of data, but when When we click the change theme button, the console also prints out params changethe information.
This is because the function inside the application component is recreated every time the application component is rendered getList, so the function is recreated every time the value in the input box is modified, so when this function is passed to the UseCallBackListcomponent it will be a new function, so It will be retriggered after each click.
Use useCallBack hook to solve
const getList = useCallback(() => {
return [num, num + 1, num + 2];
}, [num]);
After this modification, the above problems will be solved. But we found that useCallBackthe function syntax useMemois the same as the function, but they are still different. useCallBackWhat is backed up is the function, useMemobut the result after the function is backed up, so useMemo cannot pass parameters.
For example, in the above example, we can useCallBackpass in the increment, and when the subcomponent calls the getList function, we can pass in the variable value. The specific example is as follows:
// 父级组件
const getList = useCallback(
(increment: number) => {
return [num + increment, num + 1 + increment, num + 2 + increment];
},
[num]
);
// UseCallBackList 组件
useEffect(() => {
console.log("params change");
setList(lists(2));
}, [lists]);