React 源码解析

第一章 虚拟DOM：框架的"设计蓝图"

1.1 最小虚拟DOM实现

class VNode {
   
   
  constructor(tag, props, children) {
   
   
    this.tag = tag          // 标签名
    this.props = props || {
   
   }// 属性对象
    this.children = children// 子节点
    this.key = props?.key   // 优化标识
  }
}

// 创建虚拟DOM的工厂函数
function createElement(tag, props, ...children) {
   
   
  return new VNode(tag, props, children.flat())
}

// 将虚拟DOM转换为真实DOM
function render(vnode) {
   
   
  if (typeof vnode === 'string') {
   
   
    return document.createTextNode(vnode)
  }
  
  const el = document.createElement(vnode.tag)
  
  // 设置属性
  for (const [key, value] of Object.entries(vnode.props)) {
   
   
    if (key.startsWith('on')) {
   
   
      el.addEventListener(key.slice(2).toLowerCase(), value)
    } else {
   
   
      el.setAttribute(key, value)
    }
  }

  // 递归渲染子节点
  vnode.children.forEach(child => {
   
   
    el.appendChild(render(child))
  })

  return el
}

1.2 虚拟DOM的三大优势

1. 缓存计算结果：像游戏中的自动存档点，避免重复计算
2. 批量处理更新：类似快递合并发货，减少运输次数
3. 跨平台能力：同一份蓝图可输出到不同平台（Web/App/Canvas）

第二章 Diff算法：找不同的智能策略

2.1 经典Diff算法的缺陷传统树对比算法复杂度O(n³)，React优化到O(n)的关键策略：

1. 同层比较：楼层之间独立比对（类似装修时逐层施工）
2. 类型过滤：节点类型不同直接重建
3. Key值复用：类似身份证号快速识别人员

2.2 实战Diff过程演示

旧节点树：

<ul>
  <li key="A