通俗易懂的React原理（十一）：从createRoot说起

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程

前面我们一直在讲React渲染的流程，但是我们并不是从我们最初的调用开始讲的。回顾前面的十篇文章，我们是先讲了React渲染的流程，先跳过了触发渲染这一步。然后讲了一个setState或者说是dispatch的行为是怎么触发渲染的，然后又讲了Scheduler在其中起到了什么作用。

而现在，我们还没有说到最初，比如说浏览器刚拿到js资源的时候，他是怎么把React应用渲染成页面的。那么今天，我们就来看一看。

createRoot

React18开始，react-dom有了createRoot这个API。在React17及以前，我们通常是这样写：ReactDom.render(<App />, document.getElementById('root'))。而现在有了新的API，React更推荐这样写：createRoot(document.getElementById('root')).render(<APP />)

通过新写法来生成的React应用，才可以使用并发特性。新写法分成了两部，先是从一个dom节点，生成一个root，然后调用root.render方法，把React应用渲染出来。