当前位置：首页 > JavaScript

js实现vdom

2026-04-06 10:19:24JavaScript

使用 JavaScript 实现虚拟 DOM（Virtual DOM）

虚拟 DOM 是一种用于高效更新真实 DOM 的技术，其核心思想是通过 JavaScript 对象模拟 DOM 结构，并在数据变化时通过对比新旧虚拟 DOM 来最小化真实 DOM 的操作。

虚拟 DOM 的基本结构

虚拟 DOM 通常是一个 JavaScript 对象，包含标签名、属性、子节点等信息。以下是一个简单的虚拟 DOM 节点结构：

function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === 'object' ? child : createTextElement(child)
      ),
    },
  };
}

function createTextElement(text) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue: text,
      children: [],
    },
  };
}

渲染虚拟 DOM 到真实 DOM

将虚拟 DOM 转换为真实 DOM 并渲染到页面上：

function render(element, container) {
  const dom =
    element.type === 'TEXT_ELEMENT'
      ? document.createTextNode('')
      : document.createElement(element.type);

  const isProperty = key => key !== 'children';
  Object.keys(element.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = element.props[name];
    });

  element.props.children.forEach(child => render(child, dom));
  container.appendChild(dom);
}

实现 Diff 算法

Diff 算法用于比较新旧虚拟 DOM 的差异，并仅更新变化的部分：

function updateElement(dom, prevProps, nextProps) {
  // 移除旧的属性
  Object.keys(prevProps)
    .filter(isProperty)
    .forEach(name => {
      if (!(name in nextProps)) {
        dom[name] = '';
      }
    });

  // 设置新的属性
  Object.keys(nextProps)
    .filter(isProperty)
    .forEach(name => {
      if (prevProps[name] !== nextProps[name]) {
        dom[name] = nextProps[name];
      }
    });
}

function reconcile(parentDom, instance, element) {
  if (instance == null) {
    const newInstance = instantiate(element);
    parentDom.appendChild(newInstance.dom);
    return newInstance;
  } else if (element == null) {
    parentDom.removeChild(instance.dom);
    return null;
  } else if (instance.element.type !== element.type) {
    const newInstance = instantiate(element);
    parentDom.replaceChild(newInstance.dom, instance.dom);
    return newInstance;
  } else {
    updateElement(instance.dom, instance.element.props, element.props);
    instance.childInstances = reconcileChildren(instance, element);
    instance.element = element;
    return instance;
  }
}

示例用法

以下是一个完整的示例，展示如何创建和更新虚拟 DOM：

const App = () =>
  createElement('div', { id: 'app' },
    createElement('h1', null, 'Hello Virtual DOM'),
    createElement('p', null, 'This is a simple implementation.')
  );

const container = document.getElementById('root');
render(App(), container);

// 更新虚拟 DOM
setTimeout(() => {
  const updatedApp = () =>
    createElement('div', { id: 'app' },
      createElement('h1', null, 'Updated Virtual DOM'),
      createElement('p', null, 'The content has changed.')
    );
  render(updatedApp(), container);
}, 2000);

性能优化

为了提高虚拟 DOM 的性能，可以采用以下优化策略：

js实现vdom

使用键（key）来标识子节点，避免不必要的重新渲染。
批量更新 DOM 操作，减少重排和重绘。
使用 requestAnimationFrame 进行异步渲染。

function workLoop(deadline) {
  let shouldYield = false;
  while (nextUnitOfWork && !shouldYield) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    shouldYield = deadline.timeRemaining() < 1;
  }
  requestIdleCallback(workLoop);
}
requestIdleCallback(workLoop);

通过以上方法，可以实现一个基础的虚拟 DOM 库，用于高效地管理和更新页面内容。