本文详解如何在 react 中将组件正确映射为对象属性值，重点区分静态导入与动态导入的适用场景，提供可直接运行的代码示例，并指出常见误区及性能优化建议。
本文详解如何在
react
中将组件正确映射为对象属性值，重点区分静态导入与动态导入的适用场景，提供可直接运行的代码示例，并指出常见误区及性能优化建议。
在 React 开发中，常需根据路由、配置或状态动态渲染不同组件，此时将组件映射为对象属性（如 componentMap）是一种常见模式。但需注意：
直接对 import() 表达式赋值给对象属性（如 component: import('...')）是无效的
——因为 import() 返回的是 Promise，而非组件本身，且不能在模块顶层同步使用。
✅ 正确做法分两类：
1. 静态导入（推荐用于确定依赖、构建时可分析的场景）
适用于组件路径固定、无需按需加载的场景，代码简洁、类型安全、支持 Tree Shaking：
2. 动态导入 + 懒加载（推荐用于路由级拆分、首屏优化）
若需真正实现“按需加载”，应结合 React.lazy 与 Suspense，并将异步逻辑封装在工厂函数中：
React Native For Android 源码编译 中文WORD版
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
下载
}>
⚠️ 注意事项：
❌ import('...') 是异步操作，不可直接赋值给对象作为同步组件引用；
✅ React.lazy 内部已处理 Promise 解包，必须配合 import TmpComponent from 'src/views/tmp.js';
import Dashboard from 'src/views/Dashboard.js';
import Profile from 'src/views/Profile.js';
const componentMap = {
tmp: TmpComponent,
dashboard: Dashboard,
profile: Profile,
};
// 使用示例
function Router({ routeKey }) {
const Component = componentMap[routeKey] || (() => Not Found);
return const componentMap = {
tmp: () => import('src/views/tmp.js').then(module => module.default),
dashboard: () => import('src/views/Dashboard.js').then(module => module.default),
};
// 在组件内使用（需包裹 Suspense）
function AsyncRouter({ routeKey }) {
const Component = React.lazy(componentMap[routeKey] || (() => Promise.resolve({ default: () => Not Found })));
return (
Loading...