reactjs - HOC 每次都被渲染

Question

const withSnackbar = (WrappedComponent: React.FunctionComponent<any>): React.FunctionComponent<any> => {
  const LoadedWrappedComponent = (props: any): ReactElement<any> => {
    const classes = useStyles();
    const theme = useTheme();
    const [open, setOpen] = useState(false);
    const [messageData, setMessageData] = useState<IMessageData>({
      message: '',
      severityType: 'info',
      duration: 2000,
      vertical: 'bottom',
      horizontal: 'right',
    });
    const showMessage = ({
      message,
      severityType,
      vertical = 'bottom',
      horizontal = 'right',
      duration = 2000,
    }: IMessageData): void => {
      setMessageData({
        message,
        severityType,
        duration: horizontal === 'left' ? 5000 : duration,
        vertical,
        horizontal: theme.direction === 'ltr' ? 'right' : 'left',
      });
      setOpen(true);
    };

    const handleClose = (): void => {
      setOpen(false);
    };
    const { message, severityType, duration, horizontal, vertical } = messageData;
    return (
      <>
        <WrappedComponent {...props} showToastMessage={showMessage} />
        <Snackbar
          anchorOrigin={{
            vertical,
            horizontal,
          }}
          autoHideDuration={duration}
          open={open}
          onClose={handleClose}
          TransitionComponent={Slide}
        >
          <Alert
            classes={{
              root: classes.root,
            }}
            variant='filled'
            severity={severityType}
            action={
              horizontal === 'right' ? (
                <IconButton>
                  <Icon src='CloseOutlined' onClick={handleClose} />
                </IconButton>
              ) : (
                <></>
              )
            }
          >
            {message}
          </Alert>
        </Snackbar>
      </>
    );
  };
  return LoadedWrappedComponent;
};

export default withSnackbar;

**当我关闭 toast 消息但页面被重新渲染时，我的页面组件也在 HOC 的帮助下从 json 模板渲染.. 以及当我发送一些成功消息或任何减速器时的 api 调用之后.. 我的整个模板页面也重新渲染

1. 试过备忘录没有运气。
2. 试过渲染道具没有运气**

标签： reactjshigher-order-components