react——虚拟Dom和真实Dom&&diff算法

主要想法涉及两部分：
    1. 为什么要用虚拟Dom?
    2. 一定更好吗？

1.为什么用虚拟DOM

• 更轻：真实的DOM往往又很多属性和方法，是用不到的， 虚拟DOM（对象）设计的相较于真实DOM更轻
• 操作DOM：
  • 在操作真实DOM时，开销非常大，重绘重排
  • 真实DOM，很轻微的改动，都会造成dom的渲染。虚拟DOM将操作合并到一起处理，较少DOM渲染次数。
  • 真实DOM和虚拟DOM的表现形式

<ul className='52'>
    <div></div>
    <li></li>
    <li></li>
    <li></li>
   </ul>

const VDOM = {
    type:'div',
    props:{class:52}
    children:[
    {type:'',children:}
    {type:'',children:}
    {type:'',children:}
    {type:'',children:}
    ]
}

• 为什么要大写
  • babel将jsx解析的时候，不知道哪些是原生的标签哪些是react的组件，所以要加大写区分
  • 遇到大写标签时babel转为：React.createElement()
• 提高效率，不用一直关注DOM操作，而是关注业务本身（组件化开发思想）
• 提升性能，会将所有的DOM 转换为虚拟DOM。更新时，会维护两个虚拟DOM，比较具体更新的位置
• 更新局部，而非整体

2.一定更好吗？

并不是，虚拟DOM的优势主要是：1.diff 2.集中批量处理DOM