用于启动和挂载应用,通常情况下不做手动调用。只有在使用自定义 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);
由于 @modern-js/runtime/plugins
是别名处理的,在 ts 项目中使用时需要声明其类型, 只需要在 src/modern-app-env.d.ts
添加以下类型声明即可:
declare module '@modern-js/runtime/plugins';
bootstrap 只支持在 CSR 场景下使用。