React老版本升级到 React18

ReactDOM.render 在 React18之后有了新的升级，在 render 的时候，有新的写法

// ======== DOM.render =========
// Before
import { render } from 'react-dom';
import App from './App';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

// ======== umount =========
// Before
unmountComponentAtNode(container);

// After
root.unmount();

// ======== hydrate =========
// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(<App tab="home" />, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);
// Unlike with createRoot, you don't need a separate root.render() call here.