避免在打开/关闭 material-ui 对话框组件时重新渲染

如何解决避免在打开/关闭 material-ui 对话框组件时重新渲染

我在单击打开 Dialog 组件的按钮时忽略重新渲染有一些问题。目前我使用 useState 标志来切换我的 Dialog 组件，但我必须避免重新渲染，因为对大数据进行了昂贵的操作。

任何人都知道如何通过按钮 Open 打开 Dialog 和通过点击 Dialog 的按钮 Close 打开 Dialog。

Exit

我想在 ES6 中不存在像 const Item = () => { const popupRef = useRef() const dialog = () => { return( <Dialog ref={popupRef} keepMounted fullWidth maxWidth="md" aria-labelledby="alert-dialog-slide-title" aria-describedby="alert-dialog-slide-description"> <DialogTitle id="alert-dialog-slide-title"> <WrapperDialogHeader>Filters</WrapperDialogHeader> <WrapperDialogCloseBtn> <IconButton aria-label="close" > <CloseIcon /> </IconButton> </WrapperDialogCloseBtn> </DialogTitle> <DialogContent> Something </DialogContent> <DialogActions> <Button variant="outlined" // onClick={ What handler here? } color="primary"> <WrapperDialogOptionBtn>Exit</WrapperDialogOptionBtn> </Button> </DialogActions> </Dialog> ) } return( <> <IconButton onClick={ /* What method here */ }> <Typography variant="body1" color="primary"> <FilterListIcon fontSize="small" color="primary"/><WrapperFontSpecialSmall>Filters</WrapperFontSpecialSmall> </Typography> </IconButton> { dialog() } </> 这样的方法。
如何构建无需重新渲染整个组件项即可切换对话框的机制。

解决方法

将对话框移动到它自己的组件并用 memo() 换行

const Dialog = ({ open,onClose }) => {

  return (
    <Dialog
      keepMounted // why? you said the content is huge,so why keep it mounted
      fullWidth
      maxWidth="md"
      aria-labelledby="alert-dialog-slide-title"
      aria-describedby="alert-dialog-slide-description"
      open={open}
      onClose={onClose}
    >
      <DialogTitle id="alert-dialog-slide-title">
        <WrapperDialogHeader>Filters</WrapperDialogHeader>
        <WrapperDialogCloseBtn>
          <IconButton aria-label="close" >
            <CloseIcon />
          </IconButton>
        </WrapperDialogCloseBtn>
      </DialogTitle>
      <DialogContent>
        Something
      </DialogContent>
      <DialogActions>
        <Button variant="outlined" onClick={onClose} color="primary">
          <WrapperDialogOptionBtn>Exit</WrapperDialogOptionBtn>
        </Button>
      </DialogActions>
    </Dialog>
  )
};

export default memo(Dialog); // IMPORTANT

在 Item 组件中，

const Item = () => {
  const [dialogOpen,setDialogOpen] = useState(false);

  const handleDialogOpen = () => setDialogOpen(true);
  
  // prevent function being recreated on state change
  const handleDialogClose = useCallback(() => setDialogOpen(false),[]);

  return (
   <>
      <IconButton onClick={handleDialogOpen}>
        <Typography variant="body1" color="primary">
          <FilterListIcon fontSize="small" color="primary" /><WrapperFontSpecialSmall>Filters</WrapperFontSpecialSmall>
        </Typography>
      </IconButton>
      <Dialog open={dialogOpen} onClose={handleDialogClose} />
   </>
  );
}

旁注，对话框似乎包含某种过滤器 UI，大概是一个或多个列表。如果您要创建长列表，您可能需要查看 react-window。