react中的核心概念

DOM：浏览器中提供的概念；

虚拟DOM：框架中的概念；需要开发框架的程序员手动用JS对象来模拟DOM元素和嵌套关系；

• 本质：用JS对象，模拟DOM树；
• 目的：实现页面的按需更新；

要求：点击列头，实现按需排序；

1. 数据从哪儿来：从数据库查询而来

2. 数据存放在哪：浏览器内存中以对象数组形式表示

3. 如何渲染到页面：

• 方案1：手动for循环整个数组。str+='<tr></tr>'
• 方案2： 使用模板引擎。atr-template;（与方案1没有本质的区别，只是方便）

上述方案，存在性能上的缺陷：每次排序后，都需要重新渲染整个页面（包括没有发生变化的行）。

虚拟DOM

如何实现按需更新？

获取内存中的新旧两棵DOM树进行对比，得到需要被按需更新的DOM树

如何获取新旧DOM树？

分析：浏览器中没有提供直接获取DOM树的API；

方法：我们可以手动模拟新旧DOM树

如何模拟DOM树？

用JS对象，通过children嵌套DOM元素，构成DOM树

<ul id="list">
    <li class="item">item</li>
</ul>

var ul={
  tagName:'ul',
  attrs:{
     id:'list'
   },
  children:[
    {
      tagName:'li',
      attrs:{
        class:'item'
      },
      children:['item']
    }
  ]
}

diff算法

• tree diff：新旧DOM树，逐层对比的过程
• component diff：进行tree diff时，每一层中，组件级别的对比
• element diff：进行组件对比时，如果两个组件类型相同，则继续进行元素对比