// 手动同步：数据变了 → 找到 DOM → 更新文本 → 处理列表增删 → 重新绑定事件
function updateCount(next) {
  state.count = next;
  document.querySelector('#count').textContent = next;
  document.querySelector('#total').textContent = next * price;
  // 如果列表也依赖 count，还要再改一遍……
}

06 框架与组件化
  ├─ 前置：03 JavaScript、05 浏览器原理
  ├─ 紧接着：07 状态管理、08 路由与渲染架构
  ├─ 版本演进：21 React 16 → 19（Fiber / 并发 / RSC / Actions）
  ├─ 交叉：02 CSS（样式方案）、13 测试（组件测试）
  └─ 长期：17 架构（设计系统与组件治理）

// React
function Counter({ initial = 0 }) {
  const [count, setCount] = React.useState(initial);
  return (
    <button onClick={() => setCount(count + 1)}>
      点击了 {count} 次
    </button>
  );
}

<!-- Vue -->
<script setup>
import { ref } from 'vue';
const props = defineProps({ initial: { type: Number, default: 0 } });
const count = ref(props.initial);
</script>

<template>
  <button @click="count++">点击了 {{ count }} 次</button>
</template>

// React
{isLoggedIn && <Dashboard />}
{items.map((item) => <Item key={item.id} data={item} />)}

<template>
  <Dashboard v-if="isLoggedIn" />
  <Item v-for="item in items" :key="item.id" :data="item" />
</template>

// 初始：[A, B, C]
// 删除 A 后：[B, C]
// 用索引作 key：索引 0 从 A 变成 B → 框架认为「第一个组件变了内容」
// 用 id 作 key：框架知道 A 被移除，B/C 复用

// 后果：输入框里的内容错位、动画错乱、组件内部状态挂到错误的项上

// React：Hooks 必须按固定顺序调用
function Profile({ userId }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;
    fetchUser(userId)
      .then((data) => { if (!cancelled) setUser(data); })
      .catch((err) => { if (!cancelled) setError(err); });

    return () => { cancelled = true; }; // 清理：防止竞态与内存泄漏
  }, [userId]); // 依赖变化时重新执行

  if (error) return <ErrorView error={error} />;
  if (!user) return <Skeleton />;
  return <div>{user.name}</div>;
}

// Vue：组合式函数
import { ref, watchEffect } from 'vue';

export function useUser(userId) {
  const user = ref(null);
  const error = ref(null);

  watchEffect(async (onCleanup) => {
    let cancelled = false;
    onCleanup(() => { cancelled = true; });
    try {
      const data = await fetchUser(userId.value);
      if (!cancelled) user.value = data;
    } catch (err) {
      if (!cancelled) error.value = err;
    }
  });

  return { user, error };
}

// 受控：值由 state 决定，每次输入都触发渲染
function Controlled() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

// 非受控：值由 DOM 自己管理，需要时通过 ref 读
function Uncontrolled() {
  const ref = useRef(null);
  const submit = () => console.log(ref.current.value);
  return <input ref={ref} defaultValue="默认值" />;
}

/**
 * Tabs：用 Context 共享选中态，子组件只负责展示。
 * 关键：键盘左右切换、aria-selected 与 tabpanel 关联。
 */
const TabsContext = React.createContext(null);

function Tabs({ defaultValue, children }) {
  const [value, setValue] = React.useState(defaultValue);
  return (
    <TabsContext.Provider value={{ value, setValue }}>
      <div role="tablist">{children}</div>
    </TabsContext.Provider>
  );
}

function Tab({ value, children }) {
  const ctx = React.useContext(TabsContext);
  const selected = ctx.value === value;
  return (
    <button
      role="tab"
      aria-selected={selected}
      tabIndex={selected ? 0 : -1}
      onClick={() => ctx.setValue(value)}
      onKeyDown={(e) => {
        // 左右键在 tab 之间移动，是 WAI-ARIA 的基本要求
        if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
        e.preventDefault();
        ctx.setValue(nextValue(value, e.key));
      }}
    >
      {children}
    </button>
  );
}

// 不要这样：每次渲染都创建新组件类型，导致子树被销毁重建
function Parent() {
  const Child = () => <div>child</div>; // 每次都是新函数
  return <Child />;
}

const state = reactive({ count: 0, user: { name: '张三' } });

// 读取时收集依赖（track），写入时触发更新（trigger）
effect(() => {
  console.log(state.count); // 收集：count → 这个 effect
});

state.count++; // 触发：只重新执行依赖 count 的 effect

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <ExpensiveChild /> {/* 每次 Parent 渲染，它也会渲染 */}
    </>
  );
}

// 1. React.memo：props 浅比较相等时跳过渲染
const Child = React.memo(function Child({ data }) { /* ... */ });

// ⚠️ 如果父组件每次传新对象/新函数，memo 就失效
<Child data={{ id: 1 }} />        // ❌ 每次新对象
<Child data={useMemo(() => ({ id: 1 }), [])} /> // ✅ 稳定引用

// 2. useMemo：缓存计算结果
const sorted = useMemo(() => list.slice().sort(cmp), [list]);

// 3. useCallback：缓存函数引用
const onSave = useCallback(() => save(id), [id]);

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      console.log(count); // ❌ 永远是 0：闭包捕获了首次渲染的 count
    }, 1000);
    return () => clearInterval(id);
  }, []); // 依赖为空，effect 不会重建

  // 解法 1：用函数式更新（不依赖外部值）
  // setCount((c) => c + 1)

  // 解法 2：把 count 放进依赖
  // }, [count])  → 但会频繁重建定时器

  // 解法 3：用 ref 保存最新值
  const countRef = useRef(count);
  countRef.current = count;
}

// 自定义 Hook 的经典场景：异步请求
function useFetch(url) {
  const [state, setState] = useState({ data: null, loading: true, error: null });

  useEffect(() => {
    const controller = new AbortController();
    setState({ data: null, loading: true, error: null });

    fetch(url, { signal: controller.signal })
      .then((res) => res.json())
      .then((data) => setState({ data, loading: false, error: null }))
      .catch((error) => {
        if (error.name === 'AbortError') return;
        setState({ data: null, loading: false, error });
      });

    return () => controller.abort();
  }, [url]);

  return state;
}

// 两个兄弟组件都要用 keyword → 提升到父级
function SearchPage() {
  const [keyword, setKeyword] = useState('');
  return (
    <>
      <SearchBox value={keyword} onChange={setKeyword} />
      <ResultList keyword={keyword} />
    </>
  );
}

// React：错误边界只能捕获渲染阶段错误
class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    report(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) return <Fallback />;
    return this.props.children;
  }
}

// Vue
app.config.errorHandler = (err, instance, info) => {
  report(err, info);
};

/**
 * 既支持受控（外部传 value）也支持非受控（只传 defaultValue）。
 * @param {object} props 组件属性
 * @param {string} [props.value] 受控值
 * @param {string} [props.defaultValue] 非受控初始值
 * @param {(v: string) => void} [props.onChange] 值变化回调
 */
function Input({ value, defaultValue = '', onChange }) {
  const isControlled = value !== undefined;
  const [inner, setInner] = useState(defaultValue);
  const current = isControlled ? value : inner;

  const handleChange = (next) => {
    if (!isControlled) setInner(next);
    onChange?.(next);
  };

  return <input value={current} onChange={(e) => handleChange(e.target.value)} />;
}

1. React DevTools Profiler 录制一次交互
2. 看 Ranked：哪些组件耗时最长
3. 点开组件，看 "Why did this render?"
4. 区分：props 变化 / state 变化 / context 变化 / 父组件渲染
5. 只对「耗时长且频繁」的组件做优化

/**
 * 1) props 是原始值或稳定引用
 * 2) 没有被 Context 强制更新
 * 3) 父组件没有用 cloneElement 注入新 props
 * 4) 组件自身 state 未变化
 */
const Row = React.memo(function Row({ item, onSelect }) {
  return <li onClick={() => onSelect(item.id)}>{item.name}</li>;
});

// 父组件：onSelect 必须稳定，否则 memo 形同虚设
const onSelect = React.useCallback((id) => setSelected(id), []);

Fiber 节点关键字段：
  child      第一个子节点
  sibling    下一个兄弟节点
  return     父节点
  lanes      优先级（哪些更新要处理）
  alternate  上一次渲染的对应节点（用于 diff）

// useTransition：把「非紧急更新」标记为可打断
const [isPending, startTransition] = useTransition();

function search(keyword) {
  setInput(keyword);              // 紧急：输入框必须立刻响应
  startTransition(() => {
    setResults(expensiveFilter(keyword)); // 非紧急：可以被打断
  });
}

// useDeferredValue：延迟某个值的更新，保留旧 UI
const deferredQuery = useDeferredValue(query);

<template>
  <div class="static">静态内容</div>
  <p>{{ dynamic }}</p>
</template>

// 静态节点被提升到 render 函数外，不参与每次更新
const _hoisted_1 = createElementVNode('div', { class: 'static' }, '静态内容', -1 /* PATCH_FLAG.HOISTED */);

function render(_ctx) {
  return createElementBlock(Fragment, null, [
    _hoisted_1,
    createElementVNode('p', null, toDisplayString(_ctx.dynamic), 1 /* TEXT */),
  ]);
}

// react-reconciler：把「创建/更新/删除节点」抽象成宿主环境接口
const renderer = ReactReconciler({
  createInstance(type, props) { /* 返回宿主节点 */ },
  appendChild(parent, child) { /* 挂载 */ },
  commitUpdate(instance, payload) { /* 更新属性 */ },
  // ...
});

import { createRenderer } from '@vue/runtime-core';

const { createApp } = createRenderer({
  createElement(type) { /* 创建宿主元素 */ },
  insert(child, parent) { /* 插入 */ },
  remove(child) { /* 删除 */ },
  patchProp(el, key, prev, next) { /* 更新属性 */ },
});

// ❌ 配置式：props 爆炸，每加一个能力就加一个 boolean
<Select
  searchable
  clearable
  multiple
  virtualized
  showFooter
  footerContent={...}
/>

// ✅ 组合式：用 children 拼装
<Select multiple>
  <Select.Trigger />
  <Select.Content searchable virtualized>
    <Select.Group label="常用">
      <Select.Item value="a">选项 A</Select.Item>
    </Select.Group>
    <Select.Footer>自定义底部</Select.Footer>
  </Select.Content>
</Select>

// Radix / Headless UI 的模式
<Tabs.Root defaultValue="a">
  <Tabs.List>
    <Tabs.Trigger value="a">常规</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="a">内容</Tabs.Content>
</Tabs.Root>

<Button asChild>
  <a href="/docs">文档</a>
</Button>
// 渲染成 <a>，但拥有 Button 的行为与样式

服务端：renderToString(<App />) → HTML 字符串 → 浏览器
浏览器：解析 HTML（首屏可见）→ 下载 JS → hydrate（绑定事件、恢复状态）

// 一个可访问的 Tabs 的骨架
function Tabs({ items, value, onChange }) {
  return (
    <div role="tablist" aria-label="内容分组">
      {items.map((item) => (
        <button
          key={item.id}
          role="tab"
          id={`tab-${item.id}`}
          aria-selected={value === item.id}
          aria-controls={`panel-${item.id}`}
          tabIndex={value === item.id ? 0 : -1}
          onClick={() => onChange(item.id)}
        >
          {item.label}
        </button>
      ))}
    </div>
  );
}

/**
 * 搜索框：输入立即回显（紧急），结果列表延后渲染（非紧急）。
 * 注意：useDeferredValue 不是防抖，它不减少请求，只降低渲染优先级。
 */
function Search() {
  const [keyword, setKeyword] = useState('');
  const deferred = useDeferredValue(keyword);
  const stale = keyword !== deferred;

  return (
    <>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <div style={{ opacity: stale ? 0.6 : 1 }}>
        <ResultList keyword={deferred} />
      </div>
    </>
  );
}

// 把 React 组件包成 Web Component，供 Vue 页面使用
class ReactWrapper extends HTMLElement {
  connectedCallback() {
    const root = createRoot(this);
    root.render(<MyWidget {...this.dataset} />);
    this._root = root;
  }
  disconnectedCallback() {
    this._root?.unmount();
  }
}
customElements.define('my-widget', ReactWrapper);

/**
 * 弃用提示：只在开发环境打印，避免生产日志噪音。
 * @param {string} oldName 旧 API
 * @param {string} newName 新 API
 * @param {string} removeIn 计划移除的版本
 */
function warnDeprecated(oldName, newName, removeIn) {
  if (process.env.NODE_ENV === 'production') return;
  console.warn(
    `[组件库] ${oldName} 已弃用，将在 ${removeIn} 移除；请改用 ${newName}。`
  );
}

<Select
  multiple
  value={selected}
  onChange={setSelected}
  onSearch={fetchOptions}   // 异步：返回 Promise<Option[]>
>
  <Select.Trigger placeholder="请选择" />
  <Select.Content virtualized height={320} />
</Select>

// 内部状态：展开、搜索词、选项、加载中、高亮项
const [open, setOpen] = useState(false);
const [query, setQuery] = useState('');
const [options, setOptions] = useState([]);
const [loading, setLoading] = useState(false);
const [activeIndex, setActiveIndex] = useState(0);

/**
 * 极简 hooks 运行时：用数组按调用顺序存放 hook。
 * @param {() => any} renderFn 组件函数
 */
function createHooks(renderFn) {
  /** @type {Array<Record<string, any>>} */
  let hooks = [];
  let cursor = 0;
  let pending = [];

  /** 状态 hook：返回当前值与更新函数 */
  const useState = (initial) => {
    const i = cursor++;
    if (!(i in hooks)) {
      hooks[i] = { state: typeof initial === 'function' ? initial() : initial };
    }
    const hook = hooks[i];
    const setState = (next) => {
      const value = typeof next === 'function' ? next(hook.state) : next;
      if (Object.is(value, hook.state)) return;
      hook.state = value;
      schedule();
    };
    return [hook.state, setState];
  };

  /** 副作用 hook：依赖变化时登记，渲染后统一执行 */
  const useEffect = (fn, deps) => {
    const i = cursor++;
    const prev = hooks[i]?.deps;
    const changed = !prev || !deps || deps.some((d, k) => !Object.is(d, prev[k]));
    if (changed) pending.push({ i, fn, deps });
  };

  /** 微任务合并多次 setState */
  const schedule = () => {
    if (schedule.queued) return;
    schedule.queued = true;
    queueMicrotask(() => {
      schedule.queued = false;
      run();
    });
  };

  /** 执行一次渲染并提交副作用 */
  const run = () => {
    cursor = 0;
    renderFn();
    pending.splice(0).forEach(({ i, fn, deps }) => {
      hooks[i]?.cleanup?.();
      const cleanup = fn();
      hooks[i] = { ...(hooks[i] || {}), deps, cleanup };
    });
  };

  return { run, useState, useEffect };
}

/** 当前正在收集依赖的 effect */
let activeEffect = null;
/** target → key → Set<effect> */
const targetMap = new WeakMap();

/** 读取时收集依赖 */
function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) targetMap.set(target, (depsMap = new Map()));
  let dep = depsMap.get(key);
  if (!dep) depsMap.set(key, (dep = new Set()));
  dep.add(activeEffect);
}

/** 写入时触发依赖 */
function trigger(target, key) {
  const dep = targetMap.get(target)?.get(key);
  if (!dep) return;
  [...dep].forEach((effect) => effect());
}

/**
 * 创建响应式对象（浅层）。
 * @param {object} raw
 */
function reactive(raw) {
  return new Proxy(raw, {
    get(target, key, receiver) {
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const ok = Reflect.set(target, key, value, receiver);
      trigger(target, key);
      return ok;
    },
  });
}

/**
 * 注册副作用，立即执行一次以完成依赖收集。
 * @param {() => void} fn
 * @returns {() => void} 停止函数
 */
function effect(fn) {
  const runner = () => {
    activeEffect = runner;
    try {
      fn();
    } finally {
      activeEffect = null;
    }
  };
  runner();
  return () => {
    // 简化：真实实现需从所有 dep 中删除 runner
  };
}