React Modal弹框闪现问题分析与解决方案

1. 问题现象与背景分析

前端开发中使用Modal弹框组件时，经常会遇到一个令人头疼的问题——弹框在初始化时会短暂闪现一下然后消失。这种现象在React项目中尤为常见，特别是在使用第三方UI库或自定义Modal组件时。

从技术角度看，这种闪现问题通常发生在以下场景：

• 组件初次挂载时
• 状态快速切换时
• 异步数据加载前后
• 路由切换过程中

我曾在多个项目中处理过这类问题，最典型的一个案例是在电商后台管理系统开发时，商品编辑弹框在打开时会闪现约200ms，虽然时间很短，但给用户造成了明显的视觉干扰。

2. 问题根源深度解析

2.1 React渲染机制与闪现的关系

Modal闪现的根本原因在于React的渲染机制和浏览器渲染管线的配合问题。一个完整的渲染周期包括：

1. React虚拟DOM计算
2. DOM更新提交
3. 浏览器样式计算
4. 布局计算
5. 绘制执行

当Modal的显示状态从false变为true时，这个变化会触发完整的渲染管线。如果组件的初始状态设置不当，就会出现"渲染→显示→隐藏"的快速切换过程。

2.2 常见引发闪现的具体原因

根据我的项目经验，Modal闪现通常由以下具体原因导致：

1. 初始状态设置不当：

jsx复制// 错误示例
const [visible, setVisible] = useState(true); // 初始可见
useEffect(() => {
  setVisible(false); // 立即隐藏
}, []);

2. CSS过渡冲突：

css复制/* 可能导致问题的CSS */
.modal {
  transition: all 0.3s ease;
  opacity: 0;
}
.modal.show {
  opacity: 1;
}

3. 第三方组件生命周期问题：
   某些UI库的Modal组件内部有复杂的生命周期管理，可能与我们外部的状态控制产生冲突。

4. 异步操作时序问题：

jsx复制useEffect(async () => {
  const data = await fetchData();
  setVisible(true); // 数据加载后才显示
}, []);

3. 系统化解决方案

3.1 基础解决方案：控制初始渲染

最直接的解决方案是确保Modal初始不可见：

jsx复制function MyModal() {
  const [visible, setVisible] = useState(false); // 初始不可见
  
  const showModal = () => {
    setVisible(true);
  };

  return (
    <>
      <button onClick={showModal}>打开弹窗</button>
      {visible && <Modal>...</Modal>}
    </>
  );
}

3.2 进阶方案：使用CSS控制初始状态

对于需要动画效果的Modal，可以通过CSS确保初始状态正确：

css复制.modal {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.show {
  display: block;
  opacity: 1;
}

对应的React组件：

jsx复制function MyModal() {
  const [visible, setVisible] = useState(false);
  
  return (
    <div className={`modal ${visible ? 'show' : ''}`}>
      {/* 弹框内容 */}
    </div>
  );
}

3.3 使用React Transition Group

对于复杂的动画场景，推荐使用react-transition-group库：

jsx复制import { CSSTransition } from 'react-transition-group';

function MyModal() {
  const [visible, setVisible] = useState(false);
  
  return (
    <CSSTransition
      in={visible}
      timeout={300}
      classNames="modal"
      unmountOnExit
    >
      <div className="modal">
        {/* 弹框内容 */}
      </div>
    </CSSTransition>
  );
}

对应的CSS：

css复制.modal-enter {
  opacity: 0;
}
.modal-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.modal-exit {
  opacity: 1;
}
.modal-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

4. 高级场景解决方案

4.1 处理异步数据加载

当Modal内容依赖异步数据时，推荐使用双重状态控制：

jsx复制function ProductModal({ productId }) {
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  
  const showModal = async () => {
    setLoading(true);
    setVisible(true);
    await fetchProductData(productId);
    setLoading(false);
  };
  
  return (
    <>
      <button onClick={showModal}>查看商品</button>
      {visible && (
        <Modal>
          {loading ? <Spinner /> : <ProductDetail />}
        </Modal>
      )}
    </>
  );
}

4.2 路由切换时的Modal保持

在使用React Router等路由库时，Modal可能会因为路由切换而意外关闭。解决方案：

jsx复制function Layout() {
  const location = useLocation();
  const [showLoginModal, setShowLoginModal] = useState(false);
  
  // 保持Modal在路由切换时仍然显示
  const modalLocation = showLoginModal ? location : null;
  
  return (
    <>
      <Switch location={modalLocation || location}>
        {/* 路由配置 */}
      </Switch>
      <LoginModal 
        visible={showLoginModal}
        onClose={() => setShowLoginModal(false)}
      />
    </>
  );
}

5. 性能优化与调试技巧

5.1 使用React.memo优化性能

对于复杂Modal内容，使用React.memo避免不必要的重渲染：

jsx复制const ExpensiveModalContent = React.memo(({ data }) => {
  // 复杂渲染逻辑
  return <div>{/* 内容 */}</div>;
});

function MyModal() {
  return (
    <Modal>
      <ExpensiveModalContent data={data} />
    </Modal>
  );
}

5.2 使用useLayoutEffect处理同步布局

对于需要精确控制布局的场景，可以使用useLayoutEffect：

jsx复制function PositionedModal() {
  const [position, setPosition] = useState({ top: 0, left: 0 });
  const modalRef = useRef();
  
  useLayoutEffect(() => {
    if (modalRef.current) {
      const rect = modalRef.current.getBoundingClientRect();
      setPosition({
        top: window.innerHeight - rect.height - 20,
        left: 20
      });
    }
  }, []);
  
  return (
    <div 
      ref={modalRef}
      style={{
        position: 'fixed',
        top: `${position.top}px`,
        left: `${position.left}px`
      }}
    >
      {/* 弹框内容 */}
    </div>
  );
}

5.3 调试闪现问题的实用技巧

1. 使用Chrome DevTools的Performance面板记录组件挂载过程，分析时间线
2. 添加调试边界帮助定位问题组件：

jsx复制function DebugBoundary({ children, name }) {
  console.log(`Render ${name} at ${Date.now()}`);
  return children;
}

// 使用方式
<DebugBoundary name="MyModal">
  <MyModal />
</DebugBoundary>

3. 模拟慢速网络，在Chrome DevTools中设置网络节流，更容易观察闪现现象

6. 第三方UI库的特别处理

6.1 Ant Design Modal的处理

Ant Design的Modal组件常见问题及解决方案：

jsx复制import { Modal } from 'antd';

function AntdModalDemo() {
  const [visible, setVisible] = useState(false);
  
  // 正确的显示控制
  const showModal = () => {
    setVisible(true);
  };
  
  // 避免在useEffect中立即隐藏
  useEffect(() => {
    // 错误做法：会导致闪现
    // setVisible(false);
  }, []);
  
  return (
    <>
      <button onClick={showModal}>打开Antd弹窗</button>
      <Modal
        visible={visible}
        onCancel={() => setVisible(false)}
        afterClose={() => console.log('完全关闭')}
      >
        {/* 内容 */}
      </Modal>
    </>
  );
}

6.2 Material-UI Dialog的处理

Material-UI的Dialog组件需要注意过渡动画的配置：

jsx复制import { Dialog, Slide } from '@material-ui/core';

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

function MaterialDialog() {
  const [open, setOpen] = useState(false);
  
  return (
    <Dialog
      open={open}
      onClose={() => setOpen(false)}
      TransitionComponent={Transition}
      transitionDuration={{ enter: 500, exit: 300 }}
    >
      {/* 对话框内容 */}
    </Dialog>
  );
}

7. 移动端特殊考虑

移动端浏览器对Modal的处理有特殊之处：

1. 虚拟键盘问题：输入框聚焦时键盘弹出可能影响Modal布局

jsx复制function MobileModal() {
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  
  useEffect(() => {
    const handleResize = () => {
      const isMobile = window.innerWidth < 768;
      if (isMobile) {
        const visualViewport = window.visualViewport;
        setKeyboardHeight(window.innerHeight - visualViewport.height);
      }
    };
    
    window.visualViewport.addEventListener('resize', handleResize);
    return () => window.visualViewport.removeEventListener('resize', handleResize);
  }, []);
  
  return (
    <div style={{ 
      paddingBottom: `${keyboardHeight}px`,
      transition: 'padding-bottom 0.3s ease'
    }}>
      {/* 弹框内容 */}
    </div>
  );
}

2. 滚动锁定：防止背景滚动

css复制body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

对应的React代码：

jsx复制useEffect(() => {
  document.body.classList.toggle('modal-open', visible);
  return () => document.body.classList.remove('modal-open');
}, [visible]);

8. 无障碍访问(A11Y)考虑

专业的Modal实现需要考虑无障碍访问：

jsx复制function AccessibleModal() {
  const modalRef = useRef();
  
  // 焦点管理
  useEffect(() => {
    if (visible && modalRef.current) {
      modalRef.current.focus();
    }
  }, [visible]);
  
  // 键盘事件处理
  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      onClose();
    }
    // 保持焦点在弹框内
    if (e.key === 'Tab') {
      const focusable = modalRef.current.querySelectorAll(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      );
      if (focusable.length === 0) return;
      
      const first = focusable[0];
      const last = focusable[focusable.length - 1];
      
      if (!e.shiftKey && document.activeElement === last) {
        first.focus();
        e.preventDefault();
      } else if (e.shiftKey && document.activeElement === first) {
        last.focus();
        e.preventDefault();
      }
    }
  };
  
  return (
    <div
      ref={modalRef}
      role="dialog"
      aria-modal="true"
      tabIndex="-1"
      onKeyDown={handleKeyDown}
    >
      {/* 弹框内容 */}
    </div>
  );
}

9. 测试策略

确保Modal稳定性的测试方案：

1. 单元测试：测试状态切换逻辑

jsx复制test('should not show modal initially', () => {
  render(<MyModal />);
  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
});

test('should show modal when button clicked', async () => {
  render(<MyModal />);
  userEvent.click(screen.getByText('Open Modal'));
  await waitFor(() => {
    expect(screen.getByRole('dialog')).toBeInTheDocument();
  });
});

2. 集成测试：测试与其他组件的交互

jsx复制test('should close modal when clicking outside', async () => {
  render(<MyModal />);
  userEvent.click(screen.getByText('Open Modal'));
  const modal = await screen.findByRole('dialog');
  userEvent.click(document.body);
  await waitFor(() => {
    expect(modal).not.toBeInTheDocument();
  });
});

3. E2E测试：使用Cypress测试完整流程

js复制describe('Modal Behavior', () => {
  it('should not flash when opening', () => {
    cy.visit('/');
    cy.get('[data-testid="open-modal"]').click();
    cy.get('[data-testid="modal"]').should('be.visible');
    cy.percySnapshot('Modal opened state');
  });
});

10. 常见问题排查指南

根据实际项目经验整理的排查表格：

11. 架构设计建议

对于大型项目的Modal管理系统：

1. 集中式状态管理：

jsx复制// modalStore.js
const modalStore = createStore({
  modals: {},
  show(modalName) {
    this.modals[modalName] = true;
  },
  hide(modalName) {
    this.modals[modalName] = false;
  }
});

// 使用示例
function App() {
  const { modals } = useStore(modalStore);
  
  return (
    <>
      <button onClick={() => modalStore.show('userModal')}>
        打开用户弹窗
      </button>
      <UserModal visible={modals.userModal} />
    </>
  );
}

2. Modal上下文提供：

jsx复制const ModalContext = createContext();

function ModalProvider({ children }) {
  const [modals, setModals] = useState({});
  
  const showModal = (name) => {
    setModals(prev => ({ ...prev, [name]: true }));
  };
  
  const hideModal = (name) => {
    setModals(prev => ({ ...prev, [name]: false }));
  };
  
  return (
    <ModalContext.Provider value={{ modals, showModal, hideModal }}>
      {children}
      <UserModal visible={modals.user} />
      <ProductModal visible={modals.product} />
    </ModalContext.Provider>
  );
}

3. 动态Modal注册系统：

jsx复制function useModalSystem() {
  const [modals, setModals] = useState({});
  
  const registerModal = (name, component) => {
    setModals(prev => ({
      ...prev,
      [name]: { component, props: {} }
    }));
  };
  
  const showModal = (name, props) => {
    setModals(prev => ({
      ...prev,
      [name]: { ...prev[name], props: { ...props, visible: true } }
    }));
  };
  
  return { modals, registerModal, showModal };
}

// 使用示例
function App() {
  const { modals, registerModal } = useModalSystem();
  
  useEffect(() => {
    registerModal('user', UserModal);
  }, []);
  
  return (
    <>
      {Object.entries(modals).map(([name, { component: Component, props }]) => (
        <Component key={name} {...props} />
      ))}
    </>
  );
}

12. 性能优化进阶

1. 代码分割与懒加载：

jsx复制const UserModal = React.lazy(() => import('./UserModal'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <UserModal />
    </Suspense>
  );
}

2. 虚拟化长列表内容：

jsx复制function LongListModal() {
  return (
    <Modal>
      <FixedSizeList
        height={400}
        itemCount={1000}
        itemSize={50}
        width="100%"
      >
        {({ index, style }) => (
          <div style={style}>Item {index}</div>
        )}
      </FixedSizeList>
    </Modal>
  );
}

3. 避免不必要的重新渲染：

jsx复制function OptimizedModal({ data }) {
  const memoizedContent = useMemo(() => {
    return <ExpensiveComponent data={data} />;
  }, [data]);
  
  return (
    <Modal>
      {memoizedContent}
    </Modal>
  );
}

13. 设计模式应用

1. 复合组件模式：

jsx复制function Modal({ children }) {
  return (
    <div className="modal">
      <div className="modal-content">
        {children}
      </div>
    </div>
  );
}

Modal.Header = function({ children }) {
  return <div className="modal-header">{children}</div>;
};

Modal.Body = function({ children }) {
  return <div className="modal-body">{children}</div>;
};

Modal.Footer = function({ children }) {
  return <div className="modal-footer">{children}</div>;
};

// 使用示例
<Modal>
  <Modal.Header>标题</Modal.Header>
  <Modal.Body>内容</Modal.Body>
  <Modal.Footer>底部</Modal.Footer>
</Modal>

2. 渲染属性模式：

jsx复制function StatefulModal({ children }) {
  const [visible, setVisible] = useState(false);
  
  return children({
    visible,
    show: () => setVisible(true),
    hide: () => setVisible(false),
    toggle: () => setVisible(v => !v)
  });
}

// 使用示例
<StatefulModal>
  {({ visible, show, hide }) => (
    <>
      <button onClick={show}>打开</button>
      <Modal visible={visible} onClose={hide}>
        内容
      </Modal>
    </>
  )}
</StatefulModal>

3. 高阶组件模式：

jsx复制function withModalState(Component) {
  return function WrappedComponent(props) {
    const [visible, setVisible] = useState(false);
    
    return (
      <Component
        {...props}
        modalVisible={visible}
        showModal={() => setVisible(true)}
        hideModal={() => setVisible(false)}
      />
    );
  };
}

// 使用示例
const EnhancedComponent = withModalState(MyComponent);

14. 微交互优化技巧

1. 点击遮罩层关闭优化：

jsx复制function Modal({ onClose, children }) {
  const modalRef = useRef();
  
  const handleClickOutside = (e) => {
    if (modalRef.current && !modalRef.current.contains(e.target)) {
      onClose();
    }
  };
  
  return (
    <div className="modal-overlay" onClick={handleClickOutside}>
      <div ref={modalRef} className="modal-content">
        {children}
      </div>
    </div>
  );
}

2. 拖拽移动优化：

jsx复制function DraggableModal() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [dragging, setDragging] = useState(false);
  const [offset, setOffset] = useState({ x: 0, y: 0 });
  const headerRef = useRef();
  
  const handleMouseDown = (e) => {
    const rect = headerRef.current.getBoundingClientRect();
    setOffset({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top
    });
    setDragging(true);
  };
  
  const handleMouseMove = (e) => {
    if (dragging) {
      setPosition({
        x: e.clientX - offset.x,
        y: e.clientY - offset.y
      });
    }
  };
  
  const handleMouseUp = () => {
    setDragging(false);
  };
  
  useEffect(() => {
    if (dragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      return () => {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };
    }
  }, [dragging, offset]);
  
  return (
    <div 
      className="modal"
      style={{
        transform: `translate(${position.x}px, ${position.y}px)`
      }}
    >
      <div 
        ref={headerRef}
        className="modal-header"
        onMouseDown={handleMouseDown}
      >
        拖拽标题
      </div>
      <div className="modal-body">
        内容区域
      </div>
    </div>
  );
}

3. 弹性动画效果：

css复制.modal {
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modal-enter {
  transform: scale(0.8) translateY(50px);
  opacity: 0;
}

.modal-enter-active {
  transform: scale(1) translateY(0);
  opacity: 1;
}

15. 移动端手势支持

1. 下滑关闭手势：

jsx复制function SwipeableModal({ onClose }) {
  const [startY, setStartY] = useState(null);
  const [translateY, setTranslateY] = useState(0);
  const contentRef = useRef();
  
  const handleTouchStart = (e) => {
    setStartY(e.touches[0].clientY);
  };
  
  const handleTouchMove = (e) => {
    if (startY === null) return;
    
    const currentY = e.touches[0].clientY;
    const deltaY = currentY - startY;
    
    if (deltaY > 0) {
      setTranslateY(deltaY);
    }
  };
  
  const handleTouchEnd = () => {
    if (translateY > 100) {
      onClose();
    } else {
      setTranslateY(0);
    }
    setStartY(null);
  };
  
  return (
    <div 
      className="modal-container"
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <div 
        ref={contentRef}
        className="modal-content"
        style={{
          transform: `translateY(${translateY}px)`,
          transition: startY === null ? 'transform 0.3s ease' : 'none'
        }}
      >
        {/* 内容 */}
      </div>
    </div>
  );
}

2. 双指缩放支持：

jsx复制function ZoomableModal() {
  const [scale, setScale] = useState(1);
  const [startDistance, setStartDistance] = useState(null);
  
  const handleTouchStart = (e) => {
    if (e.touches.length === 2) {
      const dist = Math.hypot(
        e.touches[0].clientX - e.touches[1].clientX,
        e.touches[0].clientY - e.touches[1].clientY
      );
      setStartDistance(dist);
    }
  };
  
  const handleTouchMove = (e) => {
    if (e.touches.length === 2 && startDistance !== null) {
      const currentDistance = Math.hypot(
        e.touches[0].clientX - e.touches[1].clientX,
        e.touches[0].clientY - e.touches[1].clientY
      );
      const newScale = (currentDistance / startDistance) * scale;
      setScale(Math.min(Math.max(newScale, 0.5), 3));
    }
  };
  
  const handleTouchEnd = () => {
    setStartDistance(null);
  };
  
  return (
    <div 
      className="modal-container"
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <div 
        className="modal-content"
        style={{
          transform: `scale(${scale})`,
          transformOrigin: 'center center'
        }}
      >
        {/* 内容 */}
      </div>
    </div>
  );
}

16. 服务端渲染(SSR)支持

在Next.js等SSR框架中使用Modal的注意事项：

1. 动态导入避免SSR：

jsx复制import dynamic from 'next/dynamic';

const ClientSideModal = dynamic(
  () => import('../components/Modal'),
  { ssr: false }
);

function Page() {
  return (
    <div>
      <h1>SSR Page</h1>
      <ClientSideModal />
    </div>
  );
}

2. 状态同步问题处理：

jsx复制function SSRModal() {
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => {
    setMounted(true);
  }, []);
  
  if (!mounted) return null;
  
  return (
    <Modal>
      {/* 只在客户端渲染的内容 */}
    </Modal>
  );
}

3. 样式闪烁问题解决：

jsx复制// _document.js
import { ServerStyleSheets } from '@material-ui/core/styles';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;
    
    ctx.renderPage = () => originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
    });
    
    const initialProps = await Document.getInitialProps(ctx);
    
    return {
      ...initialProps,
      styles: [
        ...React.Children.toArray(initialProps.styles),
        sheets.getStyleElement()
      ]
    };
  }
}

17. 主题与样式系统集成

1. CSS-in-JS方案：

jsx复制const StyledModal = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: ${({ theme }) => theme.colors.background};
  color: ${({ theme }) => theme.colors.text};
  border-radius: ${({ theme }) => theme.radii.medium};
  box-shadow: ${({ theme }) => theme.shadows.large};
  z-index: ${({ theme }) => theme.zIndices.modal};
`;

function ThemedModal() {
  return (
    <ThemeProvider theme={theme}>
      <StyledModal>
        {/* 内容 */}
      </StyledModal>
    </ThemeProvider>
  );
}

2. CSS变量动态控制：

jsx复制function DynamicModal({ size = 'medium' }) {
  const sizeMap = {
    small: { width: '400px', padding: '16px' },
    medium: { width: '600px', padding: '24px' },
    large: { width: '800px', padding: '32px' }
  };
  
  return (
    <div 
      className="modal"
      style={{
        '--modal-width': sizeMap[size].width,
        '--modal-padding': sizeMap[size].padding
      }}
    >
      {/* 内容 */}
    </div>
  );
}

3. 暗黑模式支持：

jsx复制function DarkModeModal() {
  const { theme } = useTheme();
  
  return (
    <div className={`modal ${theme}`}>
      <div className="modal-content">
        {/* 内容 */}
      </div>
    </div>
  );
}

// CSS
.modal.light {
  --bg: white;
  --text: black;
}

.modal.dark {
  --bg: #333;
  --text: white;
}

.modal-content {
  background: var(--bg);
  color: var(--text);
}

18. 动画性能优化

1. 硬件加速技巧：

css复制.modal {
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

2. 优化动画属性：

css复制/* 性能好的属性 */
.modal {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 性能差的属性 */
.modal-slow {
  left: 0;
  top: 0;
  transition: left 0.3s ease, top 0.3s ease;
}

3. 减少重绘区域：

css复制.modal-content {
  contain: strict;
  /* 或者 */
  contain: content;
}

4. 使用Web动画API：

jsx复制function WebAnimationModal() {
  const modalRef = useRef();
  
  const animateIn = () => {
    modalRef.current.animate([
      { opacity: 0, transform: 'scale(0.8)' },
      { opacity: 1, transform: 'scale(1)' }
    ], {
      duration: 300,
      easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
    });
  };
  
  useEffect(() => {
    animateIn();
  }, []);
  
  return (
    <div ref={modalRef} className="modal">
      {/* 内容 */}
    </div>
  );
}

19. 多Modal堆叠管理

1. 堆叠上下文控制：

jsx复制function ModalStack() {
  const [modals, setModals] = useState([]);
  
  const openModal = (content) => {
    const id = Date.now();
    setModals(prev => [...prev, { id, content }]);
    return id;
  };
  
  const closeModal = (id) => {
    setModals(prev => prev.filter(modal => modal.id !== id));
  };
  
  return (
    <div className="modal-container">
      {modals.map((modal, index) => (
        <div 
          key={modal.id}
          className="modal-wrapper"
          style={{ zIndex: 1000 + index }}
        >
          <div className="modal-backdrop" />
          <div className="modal-content">
            {modal.content}
            <button onClick={() => closeModal(modal.id)}>关闭</button>
          </div>
        </div>
      ))}
    </div>
  );
}

2. 焦点管理增强：

jsx复制function ModalStackWithFocus() {
  const modalRefs = useRef([]);
  
  useEffect(() => {
    if (modalRefs.current.length > 0) {
      const lastModal = modalRefs.current[modalRefs.current.length - 1];
      lastModal.focus();
    }
  }, [modalRefs.current.length]);
  
  return (
    <>
      {modals.map((modal, index) => (
        <div
          key={modal.id}
          ref={el => modalRefs.current[index] = el}
          tabIndex="-1"
          aria-modal="true"
          role="dialog"
        >
          {/* 内容 */}
        </div>
      ))}
    </>
  );
}

3. 堆叠动画处理：

css复制.modal-wrapper {
  transition: opacity 0.3s ease;
}

.modal-wrapper:not(:last-child) {
  opacity: 0.7;
  pointer-events: none;
}

.modal-wrapper:last-child {
  opacity: 1;
}

20. 错误边界与异常处理

1. Modal内容错误捕获：

jsx复制function ErrorBoundaryModal({ children }) {
  const [hasError, setHasError] = useState(false);
  
  return (
    <ErrorBoundary
      fallback={<div>弹框内容出错</div>}
      onError={() => setHasError(true)}
    >
      {!hasError && children}
    </ErrorBoundary>
  );
}

// 使用示例
<Modal>
  <ErrorBoundaryModal>
    <UnstableComponent />
  </ErrorBoundaryModal>
</Modal>

2. 异步错误处理：

jsx复制function AsyncModal() {
  const [error, setError] = useState(null);
  
  const loadData = async () => {
    try {
      const data = await fetchData();
      // 处理数据
    } catch (err) {
      setError(err.message);
    }
  };
  
  if (error) {
    return (
      <Modal>
        <div className="error-message">
          加载失败: {error}
          <button onClick={loadData}>重试</button>
        </div>
      </Modal>
    );
  }
  
  return (
    <Modal>
      {/* 正常内容 */}
    </Modal>
  );
}

3. 资源加载失败处理：

jsx复制function ImageModal({ src }) {
  const [imageError, setImageError] = useState(false);
  
  return (
    <Modal>
      {imageError ? (
        <div className="image-error-placeholder">
          图片加载失败
        </div>
      ) : (
        <img 
          src={src}
          onError={() => setImageError(true)}
          alt="弹框图片"
        />
      )}
    </Modal>
  );
}