揭秘React应用启动的2种方式：从源码解析Legacy模式与Concurrent模式

React应用启动的两种模式

React应用启动有两种模式：legacy模式和concurrent模式。这两种模式都会创建ReactDOMRoot、FiberRoot和HostFiberRoot三个对象。其中，ReactDOMRoot是React应用的根节点，FiberRoot是React应用的Fiber树的根节点，HostFiberRoot是React应用的宿主Fiber树的根节点。

Legacy模式

在legacy模式下，ReactDOMRoot和HostFiberRoot是同一个对象。这意味着，React应用的根节点和宿主Fiber树的根节点是同一个对象。这种模式是React早期采用的启动模式，它相对简单，实现起来也比较容易。但是，legacy模式也存在一些问题，比如性能问题和稳定性问题。

Concurrent模式

在concurrent模式下，ReactDOMRoot和HostFiberRoot是两个不同的对象。这意味着，React应用的根节点和宿主Fiber树的根节点是两个不同的对象。这种模式是React近年来推出的新模式，它比legacy模式更加复杂，实现起来也更加困难。但是，concurrent模式也具有更好的性能和稳定性。

ReactDOMRoot、FiberRoot和HostFiberRoot三个对象

ReactDOMRoot、FiberRoot和HostFiberRoot是React应用启动过程中创建的三个对象。这三个对象在React应用中起着至关重要的作用。

ReactDOMRoot

ReactDOMRoot是React应用的根节点。它负责协调React应用的更新。当React应用的状态发生变化时，ReactDOMRoot会根据新的状态重新渲染React应用。

FiberRoot

FiberRoot是React应用的Fiber树的根节点。Fiber树是React应用的虚拟DOM树。FiberRoot负责协调Fiber树的更新。当Fiber树发生变化时，FiberRoot会根据新的Fiber树更新React应用的真实DOM树。

HostFiberRoot

HostFiberRoot是React应用的宿主Fiber树的根节点。宿主Fiber树是React应用的真实DOM树。HostFiberRoot负责协调宿主Fiber树的更新。当宿主Fiber树发生变化时，HostFiberRoot会根据新的宿主Fiber树更新React应用的真实DOM树。

总结

React应用启动有两种模式：legacy模式和concurrent模式。这两种模式都会创建ReactDOMRoot、FiberRoot和HostFiberRoot三个对象。其中，ReactDOMRoot是React应用的根节点，FiberRoot是React应用的Fiber树的根节点，HostFiberRoot是React应用的宿主Fiber树的根节点。Legacy模式下，ReactDOMRoot和HostFiberRoot是同一个对象，而Concurrent模式下，ReactDOMRoot和HostFiberRoot是两个不同的对象。