React18中为什么要用 createRoot 代替 render

哈喽，大家好呀，我是前端理想哥，今天我们来聊聊React18中的API：createRoot

想必大家应该都遇到过这种情况，在React 18项目中，如果你使用了ReactDOM.render，控制台会警告你图中这个信息，然后建议你用createRoot，这是为什么呢？

主要的原因还是为了性能方面的考虑，避免重复渲染节点

我们先来看看render的用法：

ReactDOM.render(<App />, document.getElementById('root'));

这种做法有个问题，当我们渲染 APP 组件时，root根节点需要创建一次，如果我们再继续渲染另一个组件，就像图中这样，那么root根节点就又需要重新创建一次，太浪费资源了。

ReactDOM.render(<App2 />, document.getElementById('root'));

所以，createRoot就解决了这个问题，就像图中这样，把根节点的渲染单独抽离出来，这样可以实现任意渲染新组件，而根节点不会重选创建，可以实现复用

const root = createRoot(document.getElementById("root"));
root.render(App);
root.render(App2);

至于ReactDOM.render的callback函数，React18也建议大家放在useEffect中

所以，大家的项目如果已经升级React18了，那赶紧去尝试下createRoot吧

以上，就是所有内容了，如果大家觉得还不错，欢迎给理想哥一个一键三连，万分感谢