1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const withLogger = (WrappedComponent) => {
  return function NewComponent(props) {
    useEffect(() => {
      console.log(`${WrappedComponent.name} mounted`)
    }, [])
    return <WrappedComponent {...props} />
  }
}

// 用法
const UserPageWithLogger = withLogger(UserPage)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function withAuth(WrappedComponent) {
  return function AuthenticatedComponent(props) {
    const { user, loading } = useAuth()

    if (loading) return <Spinner />
    if (!user) return <Navigate to="/login" />

    return <WrappedComponent {...props} user={user} />
  }
}

const DashboardPage = withAuth(Dashboard)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// ❌ HOC：嵌套 3 层
const Enhanced = withAuth(withTheme(withI18n(UserPage)))

// ✅ 自定义 Hook：扁平化
function usePageContext() {
  const { user } = useAuth()
  const { theme } = useTheme()
  const { t } = useI18n()
  return { user, theme, t }
}

function UserPage() {
  const ctx = usePageContext()
  // ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 经典：通用卡片
interface CardProps {
  title: string
  footer?: React.ReactNode
  children: React.ReactNode
}

function Card({ title, footer, children }: CardProps) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="card-body">{children}</div>
      {footer && <div className="card-footer">{footer}</div>}
    </div>
  )
}

// 用法
<Card
  title="用户信息"
  footer={<button>编辑</button>}
>
  <p>姓名：张三</p>
  <p>年龄：20</p>
</Card>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

interface LayoutProps {
  header: React.ReactNode
  sidebar: React.ReactNode
  children: React.ReactNode
}

function Layout({ header, sidebar, children }: LayoutProps) {
  return (
    <div className="layout">
      <header>{header}</header>
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  )
}

// 用法
<Layout
  header={<TopNav />}
  sidebar={<SideMenu />}
>
  <PageContent />
</Layout>

1
2
3
4
5
6
7
8
9

function Card({ title, children, showFooter, footer }) {
  return (
    <div>
      <h3>{title}</h3>
      {children}
      {showFooter && footer && <div>{footer}</div>}
    </div>
  )
}

1
2
3
4
5

传统 CSR：
- React + ReactDOM：140KB
- 状态管理库：50KB
- 业务代码 + 第三方库：500KB
- 全部 → 浏览器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// ❌ 传统 CSR：useEffect 串行请求
function UserProfile({ id }) {
  const [user, setUser] = useState(null)
  useEffect(() => {
    fetch(`/api/users/${id}`).then(r => r.json()).then(setUser)
  }, [id])
  // 还要写 loading / error / cleanup...
}

// ✅ RSC：async 服务端组件
async function UserProfile({ id }) {
  const user = await db.user.findUnique({ where: { id } })  // 直接 DB
  return <div>{user.name}</div>
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// app/page.tsx (Next.js 14+ 默认 RSC)
import { db } from '@/lib/db'
import LikeButton from './LikeButton'  // 客户端组件

// 服务端组件：直接读 DB
export default async function Page() {
  const post = await db.post.findFirst()

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      {/* 嵌套客户端组件——子组件的 RSC 部分仍是零 JS */}
      <LikeButton postId={post.id} initialCount={post.likes} />
    </article>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// LikeButton.tsx
'use client'  // ← 标记为客户端组件

import { useState } from 'react'

export default function LikeButton({ postId, initialCount }) {
  const [count, setCount] = useState(initialCount)
  return (
    <button onClick={async () => {
      setCount(c => c + 1)   // 乐观更新
      await fetch(`/api/posts/${postId}/like`, { method: 'POST' })
    }}>
      ❤️ {count}
    </button>
  )
}

1
2
3
4
5
6
7
8
9

问自己：这个组件需要用户交互吗？
├─ 否 → RSC（默认）
│
├─ 是（按钮点击 / 表单 / 动画 / 状态管理）
│   └─ 客户端组件（'use client'）
│
└─ 数据来源是？
    ├─ 数据库 / 文件系统 / 内部 API → RSC（直接在服务端取）
    └─ 第三方 API（用 useEffect）→ 客户端组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// ❌ 传统表单：5 个 useState、3 个 effect、手动管理 loading/error
function OldForm() {
  const [title, setTitle] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [success, setSuccess] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    setError(null)
    try {
      await fetch('/api/save', { method: 'POST', body: JSON.stringify({ title }) })
      setSuccess(true)
    } catch (e) {
      setError(e)
    } finally {
      setLoading(false)
    }
  }
  // ... 80 行
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// ✅ React 19 Actions
async function saveAction(prevState, formData) {
  await fetch('/api/save', { method: 'POST', body: formData })
  return { ok: true }
}

function NewForm() {
  const [state, formAction, isPending] = useActionState(saveAction, { ok: false })
  return (
    <form action={formAction}>
      <input name="title" />
      <button disabled={isPending}>{isPending ? '保存中...' : '保存'}</button>
      {state.ok && <p>已保存</p>}
    </form>
  )
}

1
2
3
4
5
6
7
8

// useActionState：表单状态封装
const [state, action, isPending] = useActionState(actionFn, initialState)

// useFormStatus：在表单内部组件中读父表单状态
const { pending, data, method } = useFormStatus()

// useOptimistic：乐观更新
const [optimisticState, addOptimistic] = useOptimistic(actualState, reducer)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

async function addCommentAction(prev, formData) {
  const text = formData.get('text')
  // 模拟 API 慢
  await new Promise(r => setTimeout(r, 1000))
  return [...prev, { id: Date.now(), text }]
}

function Comments() {
  const [comments, dispatch, isPending] = useActionState(addCommentAction, [])
  const [optimistic, addOptimistic] = useOptimistic(comments)

  return (
    <form action={async (formData) => {
      addOptimistic({ id: Date.now(), text: formData.get('text') })  // 立即显示
      dispatch(formData)                                              // 后台提交
    }}>
      <input name="text" />
      <button>提交</button>
      <ul>
        {optimistic.map(c => <li key={c.id}>{c.text}</li>)}
      </ul>
    </form>
  )
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// ❌ 反例：UI + 数据 + 业务全在一个组件
function UserPage() {
  const [users, setUsers] = useState([])
  const [filter, setFilter] = useState('')
  useEffect(() => { fetch('/api/users').then(/* ... */) }, [])

  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <table>
        {users.filter(u => u.name.includes(filter)).map(u => (
          <tr key={u.id}><td>{u.name}</td><td>{u.email}</td></tr>
        ))}
      </table>
    </div>
  )
}

// ✅ 正例：拆分
function useUsers() { /* 数据获取 */ return { users, loading } }
function UserFilter({ value, onChange }) { return <input ... /> }
function UserTable({ users }) { return <table>...</table> }
function UserPage() {
  const { users } = useUsers()
  const [filter, setFilter] = useState('')
  return (
    <>
      <UserFilter value={filter} onChange={setFilter} />
      <UserTable users={users.filter(u => u.name.includes(filter))} />
    </>
  )
}