![](/img/trans.png)
[英]My useMemo useCallback does not reduce the number of render. What is the correct way to use useMemo and useCallback?
[英]Should I add useCallback or useMemo to my effect?
一旦用户将鼠标悬停在按钮上,以下工具提示将调用 API。 我想知道是否需要使用useCallback
或useMemo
以避免不必要的 API 调用? 我仍然很难理解何时需要两者之一。 如果添加它是有意义的,你会怎么做?
const ProfileTooltip = ({ children, userId }) => {
const classes = useStyles();
const [open, setOpen] = useState(false);
const [profileInfo, setProfileInfo] = useState(false);
useEffect(() => {
if (!open) {
return;
}
const fetchProfileInfo = async () => {
try {
const { data } = await api.get(`users/${userId}/info/`);
setProfileInfo(data);
} catch (e) {
setProfileInfo(null);
}
};
fetchProfileInfo();
}, [open, userId]);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const renderTooltip = () => {
if (!profileInfo) {
return;
}
return (
<>
<h3 className={classes.profileName}>
{profileInfo.firstName} {profileInfo.lastName}
</h3>
<p className={classes.headline}>{profileInfo.headline}</p>
<Button size="small" variant="contained" color="primary" fullWidth>
Message
</Button>
</>
);
};
return (
<div className={classes.root}>
<Tooltip
arrow
classes={{
tooltip: classes.tooltip,
arrow: classes.arrow,
tooltipArrow: classes.tooltipArrow,
popperArrow: classes.popperArrow,
}}
interactive
placement="top-start"
onOpen={handleOpen}
onClose={handleClose}
title={renderTooltip()}
>
{children}
</Tooltip>
</div>
);
};
export default ProfileTooltip;
useCallback
钩子用于记忆回调函数,以便在每次组件重新渲染时都不会重新创建它们。 当您想要将 function 传递给子组件并且该子组件依赖于引用相等以避免不必要的重新渲染时,这很有用。
useMemo
钩子用于记忆值,以避免在组件的每次渲染上进行昂贵的计算。 传递给useMemo
的 Function 在渲染期间运行,因此任何具有副作用的代码都不应写入此 function。
我想知道是否需要使用 useCallback 或 useMemo 以避免不必要的 API 调用?
这两个钩子对你的情况都没有帮助。
API 调用等副作用属于useEffect
挂钩,为了优化副作用的执行,您需要查看useEffect
挂钩的依赖数组。
但是,您可以在useCallback
挂钩中包装handleOpen
和handleClose
函数。 这样做将防止在每次渲染时重新创建这些函数,并且记忆的 function 引用将传递给Tooltip
组件。
您需要确保正确获取useCallback
挂钩的依赖数组,否则您将遇到难以调试的错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.