React中打开Modal时整个组件重渲染的问题及优化需求

针对Modal加载时导致整个父组件重渲染的问题，可通过以下几种方式优化：

1. 用React.memo包裹Modal组件 #

如果ErrorModal和SuccessModal是函数组件，使用React.memo做浅比较，仅当props变化时才重渲染：

import { memo } from 'react';

const ErrorModal = memo(({ errorModal, handleErrorModal, errorMsg }) => {
  // 组件原有逻辑
});

const SuccessModal = memo(({ successModal, successMsg }) => {
  // 组件原有逻辑
});

2. 拆分组件隔离Modal状态 #

把Modal相关的状态、组件单独拆成子组件，让Modal的状态变化仅影响自身所在的小范围组件：

// 单独的Modal容器组件
const ModalGroup = ({ error, errorModal, handleError, successModal, successMsg }) => {
  return (
    <>
      <ErrorModal
        errorModal={errorModal}
        handleErrorModal={handleError}
        errorMsg={error}
      />
      {successModal && successMsg && (
        <SuccessModal successModal={successModal} successMsg={successMsg} />
      )}
    </>
  );
};

// 父组件中调用
<ThemeProvider theme={theme}>
  <GlobalStyle />
  {componentName !== 'questionaire' &&
    componentName !== 'activityResult' && <CardWrapper />}

  <ModalGroup 
    error={error}
    errorModal={errorModal}
    handleError={handleError}
    successModal={successModal}
    successMsg={successMsg}
  />
  
  {!successModal || !successMsg ? (
    <Grid
      className="card-layout"
      style={
        componentName === 'questionaire'
          ? { margin: '20px', height: 'calc(100% - 40px)' }
          : { margin: '30px 20px' }
      }
    >
      {customTagProps.meterId && (
        <CustomTag type={componentName} propData={customTagProps} />
      )}
    </Grid>
  ) : null}
</ThemeProvider>

3. 用useCallback缓存事件函数 #

如果handleError是父组件内的内联函数，每次父组件渲染都会生成新引用，导致Modal被动重渲染。用useCallback缓存函数引用：

import { useCallback } from 'react';

const ParentComponent = () => {
  const handleError = useCallback(() => {
    // 原错误处理逻辑
  }, []); // 依赖项根据实际逻辑调整，空数组表示仅初始化一次

  // 其他逻辑
};

4. 缓存ThemeProvider的theme对象 #

如果theme每次渲染都是新对象，会触发整个ThemeProvider下的组件重渲染。用useMemo缓存theme：

import { useMemo } from 'react';

const ParentComponent = () => {
  const theme = useMemo(() => {
    // 返回你的theme配置
    return { /* 具体theme内容 */ };
  }, []); // 依赖项根据theme生成逻辑调整

  // 其他逻辑
};

内容的提问来源于stack exchange，提问作者Devika Jayakumar