React中关闭Modal时如何避免重渲染？dispatch触发问题分析

问题核心 #

你的组件通过useAppSelector订阅了activeStep状态，调用dispatch(setActiveStep(0))时Redux状态更新会触发组件重新计算selector结果——哪怕Modal已经通过onClose()关闭（open变为false），只要组件未被卸载，就会发生不必要的重渲染。

解决方案 #

通过修改useAppSelector的逻辑，让组件在Modal关闭时不再响应activeStep的状态变化，同时调整状态重置的时机：

1. 条件化获取状态，避免关闭后触发重渲染

修改useAppSelector的返回逻辑，当Modal关闭时直接返回固定值0，不再依赖Redux中的activeStep：

export default function ImportOrderModal(props: ImportOrderModalProps) {
  const { open, onClose } = props;
  // 条件化获取activeStep：Modal关闭时固定返回0
  const activeStep = useAppSelector((state: RootState) => {
    if (!open) return 0;
    return state.orderImport.activeStep;
  });
  const steps = useImportOrderConfig();
  const dispatch = useDispatch();

  React.useEffect(() => {
    getOrdersList();
  }, []);

  const onCloseModal = () => {
    onClose();
    dispatch(setActiveStep(0));
  };

  const getOrdersList = async () => {
    const orders = await /* API call */;        
    dispatch(setOrdersList(orders));
  };

  return (
    <Modal open={open} onClose={onCloseModal}>
        <Stepper steps={steps} currentStepNumber={activeStep} />
        <FormSteps />
    </Modal>
  );
}

2. 优化：将状态重置移到useEffect中（可选）

如果希望状态重置和Modal关闭的逻辑解耦，可以监听open的变化，在Modal关闭时自动重置状态，同时保持上述selector的修改：

export default function ImportOrderModal(props: ImportOrderModalProps) {
  const { open, onClose } = props;
  const activeStep = useAppSelector((state: RootState) => {
    if (!open) return 0;
    return state.orderImport.activeStep;
  });
  const steps = useImportOrderConfig();
  const dispatch = useDispatch();

  React.useEffect(() => {
    getOrdersList();
  }, []);

  // 监听open变化，关闭时重置activeStep
  React.useEffect(() => {
    if (!open) {
      dispatch(setActiveStep(0));
    }
  }, [open, dispatch]);

  const onCloseModal = () => {
    onClose();
    // 移除这里的dispatch
  };

  const getOrdersList = async () => {
    const orders = await /* API call */;        
    dispatch(setOrdersList(orders));
  };

  return (
    <Modal open={open} onClose={onCloseModal}>
        <Stepper steps={steps} currentStepNumber={activeStep} />
        <FormSteps />
    </Modal>
  );
}

原理说明 #

当Modal关闭（open为false）时，useAppSelector直接返回0，此时即使Redux中的activeStep被修改为0，组件的activeStep值不会发生变化，因此不会触发重渲染。而Modal打开时，依然正常响应activeStep的状态变化，保证Stepper的正常显示。

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