React 核心概念演示

Portal · Error Boundary · Suspense 交互式示例

◆ Portal 模态框 ♥ Error Boundary ☁ Suspense

◆ Portal 模态框

点击下方按钮打开一个通过 Portal 渲染到 document.body 的模态框。 模态框支持拖拽遮罩层点击关闭ESC 键关闭。

// Portal 将子节点渲染到父组件 DOM 之外 createPortal(child, document.body)

♥ Error Boundary 演示

点击下方有问题的组件按钮,模拟组件运行时错误。 Error Boundary 会捕获错误并展示降级 UI,同时提供恢复按钮重置状态。

☁ Suspense 模拟

模拟 Suspense 配合 React.lazy 的异步加载流程。 点击加载按钮后,数据将以异步方式加载,加载过程中显示 fallback 内容。

等待加载...