React 文档

发表于 更新于 分类于

ReactDOM.render的改变

挂载dom的改变

  • Legacy Root API: 通过ReactDOM.render来挂载dom，其工作方式与 React 17 相同，但是会有红色warning警告，提示将被遗弃。

  • New Root API：通过ReactDOM.createRoot来挂载dom，可以使用React 18中的所有新特性。

1
2
3
4
5
6
7
8
9
10
11
import * as ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// React 17
- ReactDOM.render(<App />, container);

// React 18
+ const root = ReactDOM.createRoot(container);
+ root.render(<App />);

渲染回调的改变

  • React 17 通过给 render 传递一个回调函数，在组件被渲染或更新后调用；
  • React 18 通过App 的 props传入回调函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import * as ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

// React 17
ReactDOM.render(container, <App tab="home" />, function() {
  console.log('rendered').
});

// React 18
const root = ReactDOM.createRoot(container);
root.render(<App callback={() => console.log("renderered")} />);