createRoot 和 ReactDOM.render 有什么区别

Question

React18引入的ReactDOM.render和createRoot有什么区别？

Answer 1

在将 React 组件渲染到 DOM 时，方法

createRoot

和

ReactDOM.render

都会用到，但它们在一些方面有所不同。

将 React 组件渲染到特定 DOM 元素（通常是应用程序的根）的传统技术是

ReactDOM.render

。考虑一下：

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

在这个例子中，

<App/>

组件被渲染到页面上的

<div id="root"></div>

元素。

createRoot

: 为了以更好的性能和更好地支持并发模式的新方式渲染组件，React 17 引入了一种名为

createRoot

的新方法。

createRoot

的基本操作类似于

ReactDOM.render

的操作，除了它创建一个新的根容器并返回对它的引用而不是渲染到特定的 DOM 节点。然后，您可以使用返回的引用将您的组件渲染到根容器。例如：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

总之，

createRoot

和

ReactDOM.render

之间的主要区别是

createRoot

生成一个新的根容器用于渲染组件，而

ReactDOM.render

直接将组件渲染到给定的DOM元素。

Answer 2

我所看到的只是 createRoot 和 ReactDOM.render 之间的区别。一种是让你写更多的代码（createRoot），一种是让你写更少的代码（reactDOM.render）