框架概览

// ❌ 缺少 key：元素按索引对比，可能产生不必要的 DOM 操作
<ul>
  {items.map((item, index) => <li key={index}>{item.name}</li>)}
</ul>

// ✅ 使用稳定唯一 key：Diff 可精确复用已有 DOM 节点
<ul>
  {items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

// Hooks 本质是闭包 + 链表
// 每次渲染，React 按调用顺序遍历 Hooks 链表

function useCustomHook() {
  const [value, setValue] = useState(0);       // Hook 1
  const ref = useRef(null);                     // Hook 2
  useEffect(() => { /* ... */ }, [value]);      // Hook 3

  // ⚠️ Hooks 规则：不能在条件语句中调用
  // 因为 Hooks 依赖调用顺序匹配链表位置
  // if (condition) { useState(0); } // ❌ 顺序不一致导致错位
}

// useTransition — 标记低优先级更新
const [isPending, startTransition] = useTransition();

function handleSearch(query) {
  // 高优先级：立即更新输入框
  setInputValue(query);

  // 低优先级：搜索结果可延迟
  startTransition(() => {
    setSearchResults(filterData(query));
  });
}

// useDeferredValue — 延迟值
const deferredQuery = useDeferredValue(searchQuery);
// deferredQuery 会在主线程空闲时更新

// Vue 3 响应式简化实现
function reactive(target) {
  return new Proxy(target, {
    get(obj, key, receiver) {
      track(obj, key);  // 收集依赖
      return Reflect.get(obj, key, receiver);
    },
    set(obj, key, value, receiver) {
      const result = Reflect.set(obj, key, value, receiver);
      trigger(obj, key);  // 触发更新
      return result;
    }
  });
}

<!-- Options API：逻辑分散在 options 中 -->
<script>
export default {
  data() { return { count: 0, user: null } },
  computed: { doubled() { return this.count * 2 } },
  methods: { increment() { this.count++ } },
  mounted() { this.fetchUser() }
}
</script>

<!-- Composition API：逻辑按功能聚合 -->
<script setup>
import { ref, computed, onMounted } from 'vue';

// 计数器逻辑 — 完整聚合
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }

// 用户逻辑 — 完整聚合
const user = ref(null);
onMounted(async () => { user.value = await fetchUser() });
</script>

<!-- 静态提升：纯静态节点只创建一次 -->
<div>
  <span class="static">不会变化</span>  <!-- 提升到渲染函数外 -->
  <p>{{ dynamic }}</p>                   <!-- 动态节点 -->
</div>

<!-- PatchFlag：标记动态部分 -->
<!-- 编译结果包含数字标记：TEXT = 1, CLASS = 2, PROPS = 8 ... -->
<!-- Diff 时只检查标记的部分 -->

<!-- Block Tree：将模板按结构指令(v-if/v-for)拆分为 Block -->
<!-- 每个 Block 扁平化收集动态节点，Diff 时跳过静态部分 -->

// 定义服务
@Injectable({ providedIn: 'root' })  // 单例，全应用共享
export class UserService {
  constructor(private http: HttpClient) {}  // 自动注入
}

// 组件中使用
@Component({
  selector: 'app-user-list',
  template: `<div *ngFor="let user of users$ | async">{{ user.name }}</div>`
})
export class UserListComponent {
  users$ = this.userService.getUsers();

  constructor(private userService: UserService) {}  // 自动注入
}

<script>
  let count = 0;
  // Svelte 编译器追踪 count 的读写
  // 生成精确的 DOM 更新代码，而非 Diff 整棵树
</script>

<button on:click={() => count++}>
  Clicked {count} times
</button>

// 编译后：精确的 DOM 操作，无虚拟 DOM 开销
function instance($$self, $$props) {
  let count = 0;
  $$self.$$.update = () => {
    // 只在 count 变化时更新这个文本节点
    set_text(t1, count);
  };
}

// Solid：JSX 语法 + Signal 响应式，无虚拟 DOM
import { createSignal, createEffect } from 'solid-js';

function Counter() {
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    console.log('count changed:', count());  // 自动追踪
  });

  return <button onClick={() => setCount(count() + 1)}>{count()}</button>;
}

// Qwik：极端懒加载 — 事件处理器也不在初始 JS 中
import { component$, useSignal } from '@builder.io/qwik';

export default component$(() => {
  const count = useSignal(0);
  // onClick 处理器只在用户点击时才下载执行
  return <button onClick$={() => count.value++}>{count.value}</button>;
});