1
// React 18 时代：手动优化
2
const MyComponent = React.memo(function MyComponent({ data }) {
3
  const processed = useMemo(() => expensiveComputation(data), [data])
4
  const handleClick = useCallback(() => doSomething(processed), [processed])
5
  return <Child onClick={handleClick}>{processed}</Child>
6
})
7

8
// React 19.2 + Compiler 1.0：什么都不用写
9
function MyComponent({ data }) {
10
  const processed = expensiveComputation(data)  // 自动 memo
11
  const handleClick = () => doSomething(processed)  // 自动 callback
12
  return <Child onClick={handleClick}>{processed}</Child>
13
}

1
// app/posts/[id]/page.tsx — Next.js 15 + React 19.2
2
import { sql } from "@vercel/postgres"
3
import { Suspense } from "react"
4
import { auth } from "@/lib/auth"
5
import { PostAnalytics } from "./PostAnalytics.client"
6
import type { Post } from "@/types"
7

8
// 这是 Server Component — 默认情况下所有组件都是 Server Component
9
async function PostPage({ params }: { params: { id: string } }) {
10
  const session = await auth()  // 直接访问数据库和认证
11
  const post: Post | null = await sql`
12
    SELECT p.*, u.name as author_name
13
    FROM posts p
14
    JOIN users u ON p.author_id = u.id
15
    WHERE p.id = ${params.id} AND p.published = true
16
    LIMIT 1
17
  `.then(r => r.rows[0] ?? null)
18

19
  if (!post) {
20
    return <NotFound />
21
  }
22

23
  // Server Components 可以直接 async！
24
  const relatedPosts = await getRelatedPosts(post.tags, post.id)
25

26
  return (
27
    <article>
28
      <h1>{post.title}</h1>
29
      <p className="text-gray-500">作者：{post.author_name}</p>
30
      <div className="prose" dangerouslySetInnerHTML={{ __html: post.content }} />
31

32
      {/* 只有这个部分需要客户端交互 */}
33
      <Suspense fallback={<div>加载分析数据...</div>}>
34
        <PostAnalytics postId={post.id} userId={session?.userId} />
35
      </Suspense>
36

37
      <section>
38
        <h2>相关文章</h2>
39
        {relatedPosts.map(rp => (
40
          <RelatedPostCard key={rp.id} post={rp} />
41
        ))}
42
      </section>
43
    </article>
44
  )
45
}

1
// Vue 3.5 — 内存占用降低 56%
2
// 通过重构响应式系统，Vue 3.5 的内存占用大幅下降
3
import { ref, computed, watchEffect } from "vue"
4

5
const count = ref(0)
6
const doubled = computed(() => count.value * 2)
7

8
// 新的 watchEffect 支持自动清理
9
watchEffect((onCleanup) => {
10
  const timer = setInterval(() => {
11
    console.log("count is:", count.value)
12
  }, 1000)
13

14
  onCleanup(() => clearInterval(timer))
15
})

1
// Angular 21 — Zoneless 模式默认开启
2
import { Component, signal, computed } from "@angular/core"
3

4
@Component({
5
  selector: "app-counter",
6
  template: `
7
    <button (click)="increment()">点击次数：{{ count() }}</button>
8
    <p>双倍值：{{ doubled() }}</p>
9
    <p *ngIf="showWarning()">超过 10 次了，歇会儿吧！</p>
10
  `,
11
  // 不再需要 ChangeDetectionStrategy.OnPush
12
})
13
export class CounterComponent {
14
  count = signal(0)
15
  doubled = computed(() => this.count() * 2)
16
  showWarning = computed(() => this.count() > 10)
17

18
  increment() {
19
    this.count.update(c => c + 1)
20
  }
21
}