React虚拟dom

虚拟DOM(Virtual DOM)

什么是虚拟DOM

一句话总结虚拟DOM就是一个用来描述真实DOM的javaScript对象,这样说可能不够形象,下面分别用代码来描述真实DOM以及虚拟DOM。

真实dom：

<ul class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

对应的虚拟DOM:

let vnode = h('ul.list', [
  h('li','a'),
  h('li','b'),
  h('li','c'),
])

console.log(vnode)

控制台打印出来的Vnode:

在使用react开发项目的时候就是通过render函数生成虚拟dom并渲染出来。下面是实际开发的代码：

import React, { useEffect, useState } from 'react';
import { Card, Tag } from 'antd';

const HomePage = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const Timer = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    return () => clearInterval(Timer);
  }, []);

  return (
    <Card title="HomePage">
      mounted start <Tag color="cyan">count：{count}</Tag> unmounted clear
    </Card>
  );
};
export default HomePage;

为什么要使用虚拟dom呢？

• MVVM框架解决视图和状态同步问题
• 模板引擎可以简化视图操作,没办法跟踪状态，虚拟DOM跟踪状态变化
• 通过比较前后两次状态差异更新真实DOM，优化前端渲染性能

使用虚拟dom性能一定是最优的吗？

答案是不一定，因为在某些渲染场景不复杂的情况下，渲染真实dom只需要生成一个简单的dom替换掉以前的视图就可以，使用虚拟dom多了生成虚拟dom并使用diff算法对比，这种情况下直接渲染真实dom是更优的选择，但是现在的前端应用绝大多数都包含复杂场景，所以都用虚拟dom来提升前端的渲染性能。