React 模态窗口总是会导致父窗口重新渲染吗？

Question

我用React开发过几次模态窗口，一直面临着父组件重新渲染的问题。

例如，我目前正在使用 MUI 和 react-transition-group 来处理模式窗口。我希望 MUI 提供的模态窗口能够解决这个问题，但它仍然存在。

它始终是父组件中的 setState 用于打开模态和关闭模态。

这样的重新渲染是一个严重的问题吗？如果是，如何解决？

// parent component - predictably uses a useState
const Intro = () => {
   // useModal - returns state and setState functions
   const {isOpened, handleOpen, handleClose} = useModal(); 

   return (
      <Box className={styles.intro}>
         // ...
               <Button variant="contained" sx={overrideButtons.contained} onClick={handleOpen}>
                  Text
               </Button>
         </Container>

         // *** the modal ***
         // there is a button that uses handleClose inside
         <FullScreenDialog isOpened={isOpened} handleClose={handleClose}/>

      </Box>
   );

Answer 1

每次你想要更新 UI 上的某些内容时，你都必须执行重新渲染。在 React 中，当组件中的状态或属性发生更改时，React 会使用称为协调的过程重新渲染该组件及其子组件。这意味着 React 会将新的虚拟 DOM 与前一个虚拟 DOM 进行比较，以确定实际 DOM 中需要更新的内容。

因此，在React中，必须确保重新渲染的次数最少（合理的重新渲染）。

最后，您还应该通过尽可能深地隔离组件来确保重新渲染的大小应该很小。在您的情况下，您可以将模式分离到它自己的组件中，以避免重新渲染整个父级。