时间戳

首页 > 解决方案 > 我应该添加 useCallback 或 useMemo 到我的效果吗？

javascript - 我应该添加 useCallback 或 useMemo 到我的效果吗？

问题描述

一旦用户将鼠标悬停在按钮上，以下工具提示将调用 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;

标签： javascriptreactjs

解决方案

useCallback钩子用于记忆回调函数，以便在每次组件重新渲染时都不会重新创建它们。当您想要将函数传递给子组件并且该子组件依赖于引用相等以避免不必要的重新渲染时，这很有用。

useMemo钩子用于记忆值以避免在组件的每次渲染上进行昂贵的计算。在渲染过程中传递给useMemo运行的函数，因此不应在此函数中编写任何具有副作用的代码。

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

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

API调用等副作用属于useEffect钩子，为了优化副作用的执行，您需要查看useEffect钩子的依赖数组。

但是，您可以在钩子中包装handleOpen和handleClose函数。useCallback这样做可以防止在每次渲染时重新创建这些函数，并且一个记忆函数引用将被传递给Tooltip组件。

您需要确保获得useCallback正确的钩子依赖数组，否则您将遇到难以调试的错误。

推荐阅读