05-3.React学习笔记.虚拟DOM（部分）

虚拟DOM的创建过程##

image.png

1. 我们通过React.createElement最终创建出来一个ReactElement对象，函数 -> 对象。
   原因是React利用ReactElement对象（JS对象体现）组成了一个JS的对象树，JS的对象树就是虚拟DOM。

image.png

2. 我们将babel转义过的jsx语法通过控制台输出。结果如上图。

image.png

3. 直接输出jsx语法，与步骤2结果相同。
   对象层层展开，通过props.children，和我们的dom结构一致。

4. 如何转为真实dom。
   通过ReactDOM.render(<>,document.getElementById("app")); 函数将js对象映射到对应的app。

5. 过程总结

       // jsx -> createElement函数 -> ReactElement（对象树） -> ReactDOM.render -> 真实dom
        // native
        // jsx -> createElement函数 -> ReactElement（对象树） -> ReactDOM.rener -> 原生控件(UIButton/Button)

6. 为什么不直接修改真实DOM而使用虚拟DOM

• 很难跟踪状态发生的改变：原有开发模式中难以跟踪状态改变，不易调试。（调试方式，debug && 打印）。在react工具中可以对dom状态进行跟踪。
• 操作真实DOM性能较低：
  第一点：document.createElement本身创建出来的就是一个非常复杂的对象。
  第二点：DOM操作会引起浏览器的回流和重绘，性能损耗非常大。

举个例子：一组数字[0,1,2,3,4]，通过ul和li展示出来，后来又增加5条数据[0,1,2,3,4,5,6,7,8,9]。
可以通过重新遍历数组（先移除掉）。
或在ul后面追加另外5个li来重新渲染，如下图进行了5次遍历，意味着5次dom操作，效率很低。

image.png

最好的方法：对批量的操作进行合并，比如可以通过DocumentFragment进行合并。我们正是通过，先在虚拟DOM上面来更新，再将其更新渲染到真实dom上面，从而解决上面问题，避免重复操作真实DOM。

React官网关于Virtual DOM的说法：
虚拟dom是编程理念，UI以虚拟化的表现形式（相对简单的JS对象）被保存于内存中，并通过如ReactDOM.render
等类库使虚拟DOM与真实DOM同步，这一过程叫做协调Reconciliation。

虚拟DOM帮我们从命令式编程转到了声明式编程的模式，与React元素关联在一起，都代表了用户界面的对象，而React也使用一个名为“fibers”的内部对象来存放组件树的附加信息，两者被认为是虚拟DOM的一部分实现。

元素位置改变之类都会引起重排。