React Diffing算法渲染性能探究及Reconciliation验证问询

最近一直在深挖React里的协调（Reconciliation）机制，已经把官方文档里的相关章节仔仔细细研读了一遍。

文档里关于diff算法有个核心结论：

对比两棵树时，React首先比较两个根元素，行为会因根元素类型不同而有差异

为了亲手验证这个机制的实际表现，我在CodePen里搭了个小实验：给组件的render函数写了两种不同的树形节点结构，还加了个切换按钮，点击就能在两种结构之间来回切换，直观观察React处理不同根元素类型时的协调逻辑。

内容的提问来源于stack exchange，提问作者hamidreza nikoonia