想想react会怎么做

单节点 diff 单节点 diff 的核心逻辑在 reconcileSingleElement 方法中，多节点 diff 核心的逻辑在reconcileChildrenArray方法中

前言 做了这么久的铺垫，现在我们终于可以进入正式的react渲染流程了主流程，用一张大图分析一下。。

我们知道在react中有很多任务（比如交互触发的更新）需要执行，那边react是怎么调度和执行任务的呢，我们通过两个demo来学习一下同步调度和异步可中断的调度

第4节我们说到，react在createContainer的时候会初始化一个更新队列，赋值给fiber的updateQueue，那么这个更新机制是如何设计的呢？

lane是react中的优先级模型，react会对应不同的任务给予不同的优先级，这样react就知道哪些任务更加重要，需要优先做，哪些没那么重要，可以慢点做，而高优先级的任务是可以打断低优先级的任务的

我们从第2节了解到react的入口文件中的执行的createRoot和render方法，第3节了解了Fiber，这节就介绍一下createContainer和updateContainer方法

上一篇简单介绍了一下ReactDom创建根节点的逻辑，我看看到一个类型：FiberRoot，要讲FiberRoot也要先说一下Fiber了，所以这里我们先来简单介绍一下Fiber。

我们都知道，一般react项目根目录的入口文件中都有以下这段代码，其中就使用到了ReactDOM的createRoot方法以及其创建出的实例的render方法

书接上文，我们已经了解了jsx是如何编译成jsx方法的过程了，效果如图： 那么react中的jsx方法到底是干什么的呢？我们这一章来探索一下react中的jsx方法实现

JSX 的全称是 Javasrcipt and XML，是一个 JavaScript 的语法扩展，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式