React源码分析（1）

createRoot做了什么？

最近一直在关注业务架构，包括今年的技术栈也逐渐的从Vue方向替换到了React架构，所以作者准备从头开始学习一遍React的源码，学习的主要目的就是了解React做了什么和为什么这样做？

在这里今年也希望立一个小小的flag吧，在今年一年完成React，Vue，Echarts的源码解析文章，如果可以的话，再做一期webpack的分享

OK，那么学习正式开始吧

首先来创建一个React项目来看看

npx create-react-app my-appcd my-app

OK，一个React项目我们就创建好了，那么开始点开React.createRoot我们来看看它到底做了哪些事情吧

打开源码找到react-dom文件夹，在index找到了createRoot的暴露方法，那么继续向下吧

options参数的类型

OK我们可以看到我们的这个creatRoot方法是返回了一个RootType的类型参数的，那么我们点进去看看这是个什么东西

第一小节结束了，我们先是找到了creatRoot这个方法，但是通过源码的阅读我们发现，其实在ReactDom.js的文件中，creatRoot只是一个过滤层，用来判断环境和引入方式的，实际的逻辑在下一层也就是createRootImpl这个方法中，那么我们来继续向下学习，看看createRootImpl做了什么

isValidContainer 判断节点类型

warnIfReactDomContainerInDEV判断异常捕获

markContainerAsRoot挂载fiberDom

第二小节结束，我们可以看到createRootlmpl实现了createContainer创建了fiber节点，然后去一层层的挂载，同时做了大概一百多行的错误边界验证处理。最后返回我们所看到的下文中的root，最后一步，root.render做了什么呢，我们继续向下学习看代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));root.render(  <React.StrictMode>    <App />  </React.StrictMode>);

怀着上文的疑惑，我们继续向下看render又做了什么

OK，这段代码看完我们会发现一件事情，就是说，在我们render的过程中，我们看是不是只传入了一个jsx组件对象，但是通过render的代码过程中我们并没有发现我们有挂载，只是在最后的方法中我们进行了updateContainer更新。那么我们有一个疑问，什么时候创建了这个fiber呢？？？

回过头看createRootlmpl实现中！！！

破案了，其实当我们createRoot时，本身我们就已经创建了这个fiber对象了，而这个时候，render做了什么呢？

合理地推断一下，我们的render实现的是更新这个fiber，将我们的nodelist放入root根容器之中。实现一个react fiber的更新。UI视图的渲染更新。

OK，那么到此为止，我们就完整地看到了这个createRoot的实现，和它的WorkStream

下一期，我们来讲createContainer做了什么了，它又是如何将一个dom转换成了一个fiber，又是如何在render的时机去updateContainer更新这个fiber

下期再会！！！

React源码分析（1）

createRoot做了什么？​

createRoot做了什么？