createPortal Suspense

createPortal 将一个组件渲染到DOM的任意位置，跟Vue的Teleport组件类似。

import { createPortal } from 'react-dom';

const App = () => {
  return createPortal(<div>xxx</div>, document.body);
};

export default App;

 

入参：

1.children：要渲染的组件

2.domNode：要渲染到的DOM位置

30key?：可选，用于唯一标识要渲染的组件

 

返回值：

返回一个React元素(即jsx)，这个元素可以被React渲染到DOM的任意位置

 

应用：

1.弹窗

2.下拉框

3.全局提示

4.全局遮罩

5.全局Loading

 

Suspense 是一种异步渲染机制，其核心理念是在组件加载或数据获取过程中，先展示一个占位符（loading state），从而实现更自然流畅的用户界面更新体验。

<Suspense fallback={<div>Loading...</div>}>
  <AsyncComponent />
</Suspense>

 

场景：

1.异步组件加载：通过代码分包实现组件的按需加载，有效减少首屏加载时的资源体积，提升应用性能。（配合React.lazy）

2.异步数据加载：在数据请求过程中展示优雅的过渡状态（如 loading 动画、骨架屏等），为用户提供更流畅的交互体验。

3.异步图片资源加载：智能管理图片资源的加载状态，在图片完全加载前显示占位内容，确保页面布局稳定，提升用户体验。

 

入参：

1.fallback: 指定在组件加载或数据获取过程中展示的组件或元素

2.children: 指定要异步加载的组件或数据