[React] 1 - 组件是什么? Virtual DOM? 实现VDOM 渲染成 DOM

组件本质是个函数，产物最终是Virtual DOM。

• 组件本质：组件在React中本质上是一个函数或类，它接收输入（props）并返回Virtual DOM。这个Virtual DOM是一个轻量级的JavaScript对象，用于描述真实的DOM结构。
• Virtual DOM的产生：当组件的状态或属性发生变化时，组件会重新执行，生成新的Virtual DOM。这个过程中，React会高效地比较新旧Virtual DOM的差异，并只更新实际发生变化的部分，而不是重新渲染整个DOM树。
• 模板引擎与React的对比：传统的模板引擎通过数据拼接字符串生成HTML字符串（即真实DOM），而React则通过数据+函数/组件的方式生成Virtual DOM，再由Virtual DOM生成真实DOM。这种方式更加灵活和高效。

Virtual DOM本质是JS管理DOM的一套API，将DOM树抽象成一个js对象。

• Virtual DOM的定义：Virtual DOM是JavaScript对DOM树的一种抽象表示，它是一个JavaScript对象，用于描述DOM的结构和属性。
• Virtual DOM的作用：通过Virtual DOM，React可以在内存中高效地操作DOM，而不需要直接操作真实的DOM。这大大提高了应用的性能和响应速度。
• Virtual DOM的管理：React通过一套API来管理Virtual DOM，包括创建、更新、删除等操作。同时，React还实现了diff算法来比较新旧Virtual DOM的差异，并只更新实际发生变化的部分。

Virtual DOM render + diff 相当于 补丁patch 概念，比直接操作DOM效率高。

• render过程：render过程是将Virtual DOM转换为真实DOM的过程。在这个过程中，React会根据Virtual DOM的描述创建或更新真实的DOM节点。
• diff算法：diff算法是React用来比较新旧Virtual DOM差异的核心算法。它通过比较两个Virtual DOM树的差异，生成一个补丁（patch）对象，这个对象描述了如何更新真实的DOM以匹配新的Virtual DOM。
• 效率提升：由于diff算法只关注实际发生变化的部分，因此它比直接操作整个DOM树要高效得多。这大大减少了浏览器的重绘和回流，提高了应用的性能。

实现VDOM渲染成DOM的过程包括DOM构建、Virtual DOM构建和VDOM转化为DOM。

• DOM构建：首先，需要构建出真实的DOM结构。这通常是通过HTML字符串或DOM API（如document.createElement）来实现的。
• Virtual DOM构建：然后，根据真实的DOM结构构建出对应的Virtual DOM。Virtual DOM是一个JavaScript对象，它包含了DOM节点的类型、属性、子节点等信息。
• VDOM转化为DOM：最后，通过render函数将Virtual DOM转化为真实的DOM。这个过程包括创建DOM节点、设置属性、添加事件监听器等操作。同时，React还会利用diff算法来优化这个过程，确保只更新实际发生变化的部分。

示例代码展示了如何将Virtual DOM渲染成DOM。

• createElement函数：这个函数接收一个Virtual DOM对象作为参数，然后根据这个对象的描述创建出对应的真实DOM节点。
• 处理props：在创建DOM节点的过程中，需要处理Virtual DOM对象中的props属性。这包括设置节点的属性、添加事件监听器等操作。
• 递归处理子节点：如果Virtual DOM对象中包含子节点，那么需要递归地调用createElement函数来处理这些子节点，并将它们添加到父节点中。
• 返回DOM节点：最后，createElement函数返回创建好的真实DOM节点，这个节点可以被添加到文档的任何部分。