// 真实 DOM
;<div id="app" class="container">
  <h1>Hello</h1>
  <p>World</p>
</div>

// 虚拟 DOM
const vdom = {
  tag: "div",
  props: { id: "app", class: "container" },
  children: [
    { tag: "h1", props: {}, children: ["Hello"] },
    { tag: "p", props: {}, children: ["World"] },
  ],
}

<template>
  <div>
    <h1>静态标题</h1>
    <!-- 静态提升，跳过 Diff -->
    <p>{{ dynamic }}</p>
    <!-- 标记为动态，只比较这里 -->
  </div>
</template>

// 简化版 Diff
function diff(oldNode, newNode) {
  // 1. 类型不同，直接替换
  if (oldNode.type !== newNode.type) {
    return { type: "REPLACE", newNode }
  }

  // 2. 文本节点
  if (typeof oldNode === "string") {
    if (oldNode !== newNode) {
      return { type: "TEXT", content: newNode }
    }
    return null
  }

  // 3. 比较属性
  const propsPatches = diffProps(oldNode.props, newNode.props)

  // 4. 比较子节点
  const childrenPatches = diffChildren(oldNode.children, newNode.children)

  return { type: "UPDATE", props: propsPatches, children: childrenPatches }
}

旧列表：[a, b, c, d]
新列表：[b, a, d, c]

步骤：
1. 旧头 a vs 新头 b → 不同
2. 旧头 a vs 新尾 c → 不同
3. 旧尾 d vs 新头 b → 不同
4. 旧尾 d vs 新尾 c → 不同
5. 从旧列表找 b → 找到，移动到头部
6. 继续比较...

// 旧列表：[a, b, c]
// 新列表：[c, a, b]

// React：全部重建（无法识别移动）
// Vue：识别移动，复用节点

// 列表：[{id: 1, name: 'A'}, {id: 2, name: 'B'}]
// 渲染：<li key={index}>{item.name}</li>

// 在头部插入新项
// 新列表：[{id: 3, name: 'C'}, {id: 1, name: 'A'}, {id: 2, name: 'B'}]

// 问题：
// key 0: A → C（复用错误，状态混乱）
// key 1: B → A（复用错误）
// key 2: 无 → B（新建）

// 结果：全部更新，性能差，状态混乱

<li key={item.id}>{item.name}</li>

// 简化版实现
function defineReactive(obj, key, val) {
  const dep = new Dep() // 依赖收集器

  Object.defineProperty(obj, key, {
    get() {
      // 收集依赖
      if (Dep.target) {
        dep.depend()
      }
      return val
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal
        // 通知更新
        dep.notify()
      }
    },
  })
}

class Dep {
  constructor() {
    this.subs = []
  }

  depend() {
    if (Dep.target) {
      this.subs.push(Dep.target)
    }
  }

  notify() {
    this.subs.forEach((watcher) => watcher.update())
  }
}

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key) // 依赖收集
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      if (oldValue !== value) {
        trigger(target, key) // 触发更新
      }
      return result
    },
    deleteProperty(target, key) {
      const hadKey = Object.prototype.hasOwnProperty.call(target, key)
      const result = Reflect.deleteProperty(target, key)
      if (hadKey && result) {
        trigger(target, key)
      }
      return result
    },
  })
}

// React 事件处理函数中
handleClick = () => {
  this.setState({ count: this.state.count + 1 })
  console.log(this.state.count) // 旧值（异步）
}

// setTimeout 中
setTimeout(() => {
  this.setState({ count: this.state.count + 1 })
  console.log(this.state.count) // 新值（同步）
}, 0)

// 原生事件监听中
document.addEventListener("click", () => {
  this.setState({ count: this.state.count + 1 })
  console.log(this.state.count) // 新值（同步）
})

// 批量更新前（3 次渲染）
handleClick = () => {
  this.setState({ a: 1 })
  this.setState({ b: 2 })
  this.setState({ c: 3 })
}

// 批量更新后（1 次渲染）
handleClick = () => {
  this.setState({ a: 1 })
  this.setState({ b: 2 })
  this.setState({ c: 3 })
  // 合并为 { a: 1, b: 2, c: 3 }，只渲染一次
}

// 简化版实现
let isBatchingUpdates = false
let pendingState = []

function setState(newState) {
  if (isBatchingUpdates) {
    // 批量更新中，暂存状态
    pendingState.push(newState)
  } else {
    // 直接更新
    updateComponent(newState)
  }
}

function batchedUpdates(fn) {
  isBatchingUpdates = true
  fn()
  isBatchingUpdates = false

  // 合并所有状态，执行一次更新
  const finalState = Object.assign({}, ...pendingState)
  pendingState = []
  updateComponent(finalState)
}

// React 18 中，所有情况都自动批处理
setTimeout(() => {
  setCount((c) => c + 1)
  setFlag((f) => !f)
  // 只渲染一次
}, 1000)

React 15: 递归渲染（阻塞）
├─ 渲染 A
│  ├─ 渲染 B
│  │  ├─ 渲染 C（耗时 200ms，页面卡顿）
│  │  └─ 渲染 D
│  └─ 渲染 E
└─ 渲染 F

React 16+: Fiber（可中断）
├─ 渲染 A → 检查 → 继续
├─ 渲染 B → 检查 → 继续
├─ 渲染 C → 检查 → 有高优先级任务 → 暂停
├─ 执行高优先级任务
└─ 恢复渲染 C → 完成

interface Fiber {
  type: any,           // 组件类型
  key: null | string,  // key
  stateNode: any,      // 真实 DOM 或组件实例

  // 链表指针
  return: Fiber | null,    // 父节点
  child: Fiber | null,     // 第一个子节点
  sibling: Fiber | null,   // 下一个兄弟节点

  // 工作单元
  pendingProps: any,   // 新 props
  memoizedProps: any,  // 旧 props
  memoizedState: any,  // 旧 state

  // 副作用
  effectTag: number,   // 副作用类型（增删改）
  nextEffect: Fiber | null, // 下一个副作用节点
}

current Fiber Tree（当前显示）
    ↓
workInProgress Fiber Tree（正在构建）
    ↓
渲染完成，交换指针
    ↓
workInProgress 变为 current

// 简化版实现
const FRAME_DURATION = 5 // 每帧最多 5ms 用于 React 渲染

function workLoop(deadline) {
  let shouldYield = false

  while (nextUnitOfWork && !shouldYield) {
    // 执行一个 Fiber 单元
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork)

    // 检查是否超时
    shouldYield = deadline.timeRemaining() < FRAME_DURATION
  }

  if (nextUnitOfWork) {
    // 还有工作，请求下一帧继续
    requestIdleCallback(workLoop)
  } else {
    // 完成，提交更改
    commitRoot()
  }
}

// 启动
requestIdleCallback(workLoop)

// 不同优先级的更新
const priorities = {
  ImmediatePriority: 1, // 立即执行（用户输入）
  UserBlockingPriority: 2, // 用户阻塞（点击）
  NormalPriority: 3, // 正常优先级
  LowPriority: 4, // 低优先级
  IdlePriority: 5, // 空闲时执行
}

// React 内部实现
const React = (function () {
  let hooks = [] // 存储所有 state
  let idx = 0 // 当前 hook 的索引

  function useState(initialValue) {
    const state = hooks[idx] !== undefined ? hooks[idx] : initialValue
    hooks[idx] = state

    const _idx = idx
    idx++

    function setState(newValue) {
      hooks[_idx] = newValue
      render() // 重新渲染
    }

    return [state, setState]
  }

  function render(Component) {
    idx = 0 // 每次渲染重置索引
    const comp = Component()
    comp.render()
    return comp
  }

  return { useState, render }
})()

// 使用
function MyComponent() {
  const [count, setCount] = React.useState(0)
  const [name, setName] = React.useState("React")

  return {
    render: () => {
      console.log({ count, name })
    },
    click: () => setCount(count + 1),
  }
}

useEffect:
组件渲染 → 绘制到屏幕 → 执行 useEffect

useLayoutEffect:
组件渲染 → 执行 useLayoutEffect → 绘制到屏幕

useCallback(fn, deps) === useMemo(() => fn, deps)

// useMemo：缓存计算结果
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

// useCallback：缓存函数
const handleClick = useCallback(() => {
  doSomething(a, b)
}, [a, b])

const MyComponent = React.memo(
  function MyComponent({ name }) {
    return <div>{name}</div>
  },
  (prevProps, nextProps) => {
    // 自定义比较
    return prevProps.name === nextProps.name
  }
)

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

// 使用 requestIdleCallback 或 MessageChannel
function workLoop(hasTimeRemaining) {
  while (nextUnitOfWork && hasTimeRemaining()) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
  }

  if (nextUnitOfWork) {
    // 时间用完，下一帧继续
    scheduleCallback(workLoop)
  }
}

<template>
  <div>
    <h1>静态标题</h1>
    <!-- 静态节点 -->
    <p>{{ dynamic }}</p>
    <!-- 动态节点 -->
  </div>
</template>

const _hoisted_1 = /*#__PURE__*/ createElementVNode(
  "h1",
  null,
  "静态标题",
  -1 /* HOISTED */
)

export function render(_ctx, _cache) {
  return (
    openBlock(),
    createElementBlock("div", null, [
      _hoisted_1, // 直接复用静态节点
      createElementVNode(
        "p",
        null,
        toDisplayString(_ctx.dynamic),
        1 /* TEXT */
      ),
    ])
  )
}

// React 18 默认启用
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)

// useTransition：标记非紧急更新
const [isPending, startTransition] = useTransition()

startTransition(() => {
  setSearchQuery(input) // 非紧急更新，可中断
})