Javascript 我应该添加useCallback还是UseMoom？

一旦用户将鼠标悬停在按钮上，以下工具提示将调用API。 我想知道是否需要使用

useCallback

或

usemo

来避免不必要的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;

const ProfileTooltip=（{children，userId}）=>{
const classes=useStyles（）；
const[open，setOpen]=useState（false）；
const[profileInfo，setProfileInfo]=useState（false）；
useffect（（）=>{
如果（！打开）{
返回；
}
const fetchProfileInfo=async（）=>{
试一试{
const{data}=await api.get（`users/${userId}/info/`）；
setProfileInfo（数据）；
}捕获（e）{
setProfileInfo（空）；
}
};
fetchProfileInfo（）；
}，[open，userId]）；
const handleOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
常量renderTooltip=（）=>{
如果（！profileInfo）{
返回；
}
返回(
{profileInfo.firstName}{profileInfo.lastName}
{profileInfo.headline}
消息
);
};
返回(
{儿童}
);
};
导出默认配置文件工具提示；

useCallback

钩子用于记忆回调函数，以便在每次组件重新呈现时不会重新创建回调函数。当您希望将函数传递给子组件并且该子组件依赖于引用相等性以避免不必要的重新渲染时，这非常有用

usemo

hook用于记忆值，以避免对组件的每次渲染进行昂贵的计算。传递给

usemo

的函数在渲染过程中运行，因此不应在此函数中编写任何具有副作用的代码

我想知道我是否需要使用useCallback或useMemo来避免 不必要的API调用

这两个钩子对你的情况都没有帮助

API调用等副作用属于

useffect

hook，要优化副作用的执行，您需要查看

useffect

hook的依赖关系数组

但是，您可以在

useCallback

hook中包装

handleOpen

和

handleClose

函数。这样做将防止在每次渲染时重新创建这些函数，并将记忆函数引用传递给工具提示组件

---

您需要确保正确使用了

useCallback

hook的依赖关系数组，否则您将遇到难以调试的错误。

useMoom和useCallback非常相似，只需在处理函数时使用useCallback，在处理数据（对象、数组、字符串等）时使用useMoom即可您在提供的代码段中添加了什么？传递的打开/关闭处理程序和/或renderTooltip回调

useMemo

和

useCallback

通常用于对值和函数进行“稳定”引用，并且通常作为性能优化。但这些可能很棘手。如果没有性能问题，那么不要过早优化。您好，谢谢。我想我理解其中的区别。因此，基本上我现在构建它的方式已经有了意义，因为API调用是在

useffect

中处理的。As handleOpen/Closed仅更改打开常量。在这一点上，对我来说似乎是过度优化了？是的，除非存在性能问题，否则您不需要过度优化所有内容。