React 18.2.0与Ant-Design 4弹窗组件冲突致页面冻结，如何解决？

核心原因 #

React 18引入的**自动批处理（Automatic Batching）**会将多个状态更新合并为一次渲染，而Ant Design 4的弹窗类组件（Cascader、Select等）内部状态逻辑未完全适配该特性，偶发导致渲染队列阻塞，引发页面冻结。

具体解决方案 #

1. 精准使用flushSync

flushSync可强制React立即执行状态更新并完成渲染，避免批处理导致的队列堆积。你需要在触发弹窗交互后的状态更新逻辑外层包裹它：

• 场景1：选择组件的回调（如Select/Cascader的onChange）

import { flushSync } from 'react-dom';
import { Select } from 'antd';

const MyComponent = () => {
  const [selectedValue, setSelectedValue] = useState('');

  const handleChange = (value) => {
    // 用flushSync包裹状态更新
    flushSync(() => {
      setSelectedValue(value);
    });
    // 非紧急业务逻辑（如接口请求）可放在外部，无需强制同步
    // fetchData(value);
  };

  return <Select onChange={handleChange} value={selectedValue} />;
};

• 场景2：手动控制弹窗显示/隐藏
  如果通过visible状态控制弹窗展开，切换状态时也可使用：

import { flushSync } from 'react-dom';
import { Cascader } from 'antd';

const MyComponent = () => {
  const [cascaderVisible, setCascaderVisible] = useState(false);

  const handleToggleVisible = () => {
    flushSync(() => {
      setCascaderVisible(prev => !prev);
    });
  };

  return <Cascader visible={cascaderVisible} onVisibleChange={handleToggleVisible} />;
};

2. 升级Ant Design 4到最新兼容版本

Ant Design 4后续小版本针对React 18做了适配修复，建议升级至4.24.10及以上版本（AntD 4最后一批支持React 18的稳定版本），多数弹窗组件的冻结问题已被官方修复。

3. 排查不必要的重渲染

检查使用弹窗组件的父组件是否存在过度重渲染：

• 用React.memo包裹无需频繁重渲染的子组件
• 用useCallback缓存回调函数，避免在组件内部定义匿名函数（如onChange={() => {...}}）
• 排查全局状态（如Redux）更新是否触发无关组件重渲染

4. 清理全局事件监听

若项目中有自定义全局事件监听（如scroll、resize），确保弹窗隐藏时移除监听，避免交互过程中事件循环触发过多逻辑导致阻塞。

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