指南
教程
配置
API
社区
指南
教程
配置
API
社区
简体中文

bootstrap

用于启动和挂载应用，通常情况下不做手动调用。只有在使用自定义 Bootstrap 时，才需要使用该 API。

使用姿势

import ReactDOM from 'react-dom/client';
import { bootstrap } from '@modern-js/runtime';

bootstrap(App, 'root', undefined, ReactDOM);

函数签名

type BootStrap<T = unknown> = (
  App: React.ComponentType,
  id: string | HTMLElement | RuntimeContext,
  root?: any,
  ReactDOM?: {
    render?: Renderer;
    hydrate?: Renderer;
    createRoot?: typeof createRoot;
    hydrateRoot?: typeof hydrateRoot;
  },
) => Promise<T>;

参数

  • AppComponent：通过 createApp 创建的 ReactElement 实例。
  • id：要挂载的 DOM 根元素 id，如 "root"。
  • root: ReactDOM.createRoot 的返回值，用于 bootstrap 函数外需要 root 销毁组件的场景。
  • ReactDOM: ReactDOM 对象，用于区分 React 18 和 React 17 API。

示例

import ReactDOM from 'react-dom/client';
import { createApp, bootstrap } from '@modern-js/runtime';

function App() {
  return <div>Hello Modern.js</div>;
}

const WrappedApp = createApp({
  // 传入自定义插件
  plugins: [customPlugin()],
})(App);

bootstrap(WrappedApp, 'root', undefined, ReactDOM);
INFO

由于 @modern-js/runtime/plugins 是别名处理的，在 ts 项目中使用时需要声明其类型， 只需要在 src/modern-app-env.d.ts 添加以下类型声明即可：

declare module '@modern-js/runtime/plugins';
WARNING

bootstrap 只支持在 CSR 场景下使用。