应用入口
| 分类 | v18+ | v18- |
|---|---|---|
| CSR/客户端渲染 | createRoot() v18.0 | ReactDOM.render() v0.13 |
\- | root.render(reactNode) v18.0 | 同上 |
\- | root.unmount() v18.0 | ReactDOM.unmountComponentAtNode() v0.13 |
\- | hydrateRoot() v18.0 | ReactDOM.hydrate() v0.13 |
入口配置
- v18+
- v18-
import { createRoot } from 'react-dom/client';
import App from './App.js';
// 在浏览器 DOM 元素中创建根节点显示内容
const root = createRoot(document.getElementById('root'));
// 将一段 JSX（“React 节点”）在 React 的根节点中渲染为 DOM 节点并显示
root.render(<App />);
// 销毁 React 根节点中的一个已经渲染的树
// 通常不需要
// root.unmount();
import { render, unmountComponentAtNode } from 'react-dom'
import App from './App.js';
// 在浏览器 DOM 元素中创建根节点显示内容
// 将一段 JSX（“React 节点”）在 React 的根节点中渲染为 DOM 节点并显示
render(<App />, document.getElementById('root'));
// 销毁 React 根节点中的一个已经渲染的树
// 通常不需要
// unmountComponentAtNode(document.getElementById('root'));