【日拱一卒】React原理一 Virtual DOM 上

这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战

前言

React原理层面的知识梳理是为了之后的构建复杂应用做铺垫，并不是为了卷。

VirtualDOM是什么，VirtualDOM Diff高效的原因

VitualDOM是什么

官方文档给出的定义

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

简单而言，Virtual DOM是一种编程理念，将UI节点虚拟的保存在内存中，并且通过某些库渲染成真实的DOM。

官方文档传送门

UI节点抽象

这里的UI节点抽象有两层含义。一层是在浏览器中，把真实的DOM节点抽象成了虚拟DOM节点。第二层是在移动端应用中，也把对应的UI节点抽象成了VirtualDOM节点。所有就得到了如下的特点：

Learn Once, Write Anywhere

学一次React，你就能开发Web应用和移动端应用。React与React Native基本的语法是大致相同的。这里体现了React的跨平台性质。

跨平台性的本质也是通过Virtual DOM构建UI

Virtual DOM构建UI

以web开发为例，探讨Virtual构建UI的过程。

通过VirtualDOM渲染页面

例子

class App extends Component {
    state={
        text: 'Virtual DOM'
    }
    render(){
        const {text} = this.state
        return (
            <div><span>{text}</span></div>
        )
    }
}
复制代码

渲染state变量text的值。在这个过程中React是通过render方法渲染Virtual DOM，从而绘制出了真实的DOM。每次修改了state的值就会执行render方法。

React渲染

Virtual DOM 映射到 HTML　DOM

Virtual DOM VS 原生DOM

原生DOM更新

DOM API调用更新UI

Virtual DOM更新（过程更复杂）

每次render都会产生一份新的 ‘react dom’
Virtual DOM要对新旧'react dom'进行比较，从而确定在旧'dom'的基础上进行多少变更
确定最优的变更策略之后调用DOM API更新UI

提问：这些流程上多出的步骤会使Virtual DOM更加低效吗？

回答：直接操作DOM会引起重绘，而在VirtualDOM中，React已经帮我们做了这一个操作。我们之所以情感上觉得操作DOM会比较快，是因为当前例子过于简单，毕竟只有两个元素。如果这是一个网站，直接操作DOM相当于F5刷新了一下，而操作Virtual DOM却不会进行重绘，这也是Virtual DOM高效的地方。

接下来深入Virtual DOM高效的具体原因

Virtual DOM 数据结构

Virtual DOM本质上是JS对象对HTML节点的一个抽象，即以JS对象的形式表示HTML。

从而呈现在用户面前的页面就是一个复杂的递归对象。

// Virtual Dom伪代码
const globaldom = {
    tagName: 'html',
    children: [{
        tagName: 'head'
    },{
        tagName: 'body',
        children: [{
            tagName: 'div',
            attributes: {
                className:'test'
            }
        }]
    }]
}

<!-- html 伪代码 -->
<html>
    <head></head>
    <body>
        <div class="test"></div>
    </body>    
</html>
复制代码