1
2
3
4
5
6
7

import { use } from 'react'

// use() 读取 Promise
function UserProfile({ userPromise }) {
  const user = use(userPromise)
  return <h1>{user.name}</h1>
}

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

function Comments({ commentsPromise }) {
  // use() 会等待 Promise resolve（组件此时会挂起）
  // 如果不用 Suspense 包裹，Promise pending 时会抛出错误
  const comments = use(commentsPromise)

  return (
    <ul>
      {comments.map(c => (
        <li key={c.id}>{c.text}</li>
      ))}
    </ul>
  )
}

// 使用时必须包裹 Suspense：
// <Suspense fallback={<div>加载中...</div>}>
//   <Comments commentsPromise={fetchComments(postId)} />
// </Suspense>

1
2
3
4
5
6
7
8

// use() 可以在条件语句中使用
function MyComponent({ showTheme }) {
  let theme = null  // ✅ 允许条件调用，但变量需在外部声明
  if (showTheme) {
    theme = use(ThemeContext)
  }
  return <div style={{ background: theme?.color }}>Hello</div>
}

1
2
3
4

// use() 搭配 Suspense 使用：加载中显示 fallback，成功后显示内容
<Suspense fallback={<div>加载中...</div>}>
  <UserProfile userPromise={fetchUser(id)} />
</Suspense>

1
2
3
4
5
6

// Promise 被 reject 时，Error Boundary 会捕获错误并显示降级 UI
<ErrorBoundary fallback={<div>加载用户信息失败</div>}>
  <Suspense fallback={<div>加载中...</div>}>
    <UserProfile userPromise={fetchUser(id)} />
  </Suspense>
</ErrorBoundary>

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

import { useOptimistic } from 'react'

function LikeButton({ likes, onLike }) {
  // useOptimistic：返回 [乐观值, 添加乐观更新的函数]
  // 第一个参数是当前"真实"值（服务端返回的 likes）
  // 第二个参数是"乐观更新函数"：
  //   state = 当前乐观值（初始为 likes），newLike = 传给 addOptimisticLike 的参数
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (state, newLike) => state + newLike  // 旧状态 + 新增量 = 新状态
  )

  async function handleLike() {
    addOptimisticLike(1)  // 立即将 UI 显示为 likes + 1（不等服务端）
    await onLike()        // 实际请求在后台进行
  }

  return (
    <button onClick={handleLike}>
      👍 {optimisticLikes}
    </button>
  )
}

 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
33
34

// 🚢 传统写法：表单提交需要一大坨代码
function OldForm() {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  async function handleSubmit(e) {
    e.preventDefault()  // 阻止默认行为
    setLoading(true)
    setError(null)
    
    try {
      const formData = new FormData(e.target)
      await fetch('/api/createPost', {
        method: 'POST',
        body: JSON.stringify(Object.fromEntries(formData))
      })
      // 成功后还要清空表单、跳转页面...
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      {/* loading 和 error 的 UI 都要自己写 */}
      {loading && <Spinner />}
      {error && <ErrorMessage error={error} />}
      <input name="title" />
      <button disabled={loading}>提交</button>
    </form>
  )
}

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

// ✨ Actions 写法：简洁到哭
async function createPost(formData) {
  'use server'  // 这行代码运行在服务端！
  await db.posts.create({ title: formData.get('title') })
}

function NewForm() {
  return (
    <form action={createPost}>
      {/* loading？自动处理！ */}
      {/* error？自动处理！ */}
      {/* 成功？自动处理！ */}
      <input name="title" />
      <button type="submit">提交</button>
    </form>
  )
}

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

// 注意：'use server' 必须写在文件最顶部（所有 import 之前！）
// 'use server'

// 以下为 actions.ts（服务端文件）的写法示例：
// 'use server'  // ← 必须位于文件第一行！
//
// async function createPost(formData: FormData) {
//   const title = formData.get('title')
//   await db.posts.create({ title })
// }

// 前端组件中使用时，直接把 Server Action 作为 action 传递：
function Form() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">提交</button>
    </form>
  )
}

1
2
3
4
5
6
7
8

// actions.ts（服务端文件）
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  // 这里可以直接访问数据库，无需 API 接口
  await db.posts.create({ title })
}

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

function PostForm() {
  const [isPending, startTransition] = useTransition()

  async function handleSubmit(formData) {
    startTransition(async () => {
      await createPost(formData)  // Action 在 transition 内执行
    })
  }

  return (
    <form action={handleSubmit}>
      <input name="title" />
      <button type="submit" disabled={isPending}>
        {isPending ? '发布中...' : '发布'}
      </button>
    </form>
  )
}

1
2
3
4

// React 19：不需要 forwardRef
function Button({ children, ref }) {
  return <button ref={ref}>{children}</button>
}

1
2
3
4

// React 19 仍然支持 forwardRef
const Button = forwardRef(({ children }, ref) => {
  return <button ref={ref}>{children}</button>
})

1
2
3
4
5
6
7
8
9

// React 18 的错误（可能是这样的）
Error: Minified React Error #418

// React 19 的错误（更详细的组件堆栈）
Error: Cannot read property 'map' of undefined

  at CommentList (comments.jsx:12)
  at PostDetail (post.jsx:5)
  at App (app.jsx:10)

 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

import { Component } from 'react'

class ErrorBoundary extends Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级 UI
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    // 记录错误日志
    console.error('React Error:', error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>
    }
    return this.props.children
  }
}

// 使用
<ErrorBoundary>
  <BuggyComponent />
</ErrorBoundary>

1
2
3
4
5
6
7
8

// React 18+ 唯一正确的用法
import { createRoot } from 'react-dom/client'

const root = createRoot(document.getElementById('root'))
root.render(<App />)

// ReactDOM.render（React 18 之前的方式）已废弃
// ReactDOM.render(<App />, rootElement)  // ❌ 别用了

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function Input() {
  return (
    <input
      ref={node => {
        console.log('mounted', node)
        return () => console.log('unmounted')  // ✅ cleanup 函数
      }}
    />
  )
}