react16之前的虚拟dom数据结构简单简介

在react 16之前的版本中，虚拟dom节点的数据结构看起来大致如下

const VitrualDom = {
  type: 'div',
  props: { class: 'title' },
  children: [
    {
      type: 'span',
      children: 'Hello ConardLi'
    },
    {
      type: 'ul',
      children: [
        { type: 'li', children: '苹果' },
        { type: 'li', children: '橘子' }
      ]
    }
  ]
}

这个结构是一个典型的树形结构，其中，每个节点都有零个或多个子节点，形成了一个树状的层次结构。这种结构非常适合用来表示HTML文档的结构，并且便于在内存中进行操作。

然而，这种树形结构的一个重要缺点是递归遍历无法中断。这意味着当React需要更新DOM时，整个更新过程必须一次性完成，不能被打断。如果这个过程耗时过长，将会阻塞主线程，导致用户界面变得不响应。这也是react16引入fiber架构的原因，因为fiber架构允许更新过程被中断，并且可以分批次完成，从而提高了应用的响应性和性能。