React 19 实战指南 2026

React 19

⚛️ React 19 是什么？ 2024 年底正式发布的 React 19 是 React 自 18 以来最大的一次更新——它不只是修修补补，而是把 Actions（动作）、Server Components（服务端组件） 和 文档元数据原生支持 这三个长期存在于实验阶段的能力，正式推向稳定。这意味着「表单提交」、「数据请求」、「SEO 元数据」这三件前端最频繁的事，终于有了框架级的标准答案。

本文将带你从 0 到 1 掌握 React 19：

✅ React 19 核心变化（与 React 18 完整对比）
✅ 四大新 Hook：useActionState / useOptimistic / useFormStatus / use
✅ Actions 与表单处理（告别手写 useState + fetch）
✅ Server Components 实战（'use client' / 'use server' 心智模型）
✅ 文档元数据 <title> / <meta> 原生支持
✅ ref 作为 prop、Context 优化、资源预加载
✅ Vite + React 19 项目实战（待办 + 仪表盘）
✅ 与 Vue 的选型对比（本站技术思考）
✅ 18 → 19 升级迁移指南（破坏性变更清单）
✅ 常见问题与解决方案

一、React 19 核心变化

React 19 的设计哲学可以概括为一句话：让框架替你做更多「样板代码」的脏活。下面这张对比表是理解全部新特性的钥匙。

1.1 React 18 vs 19 关键差异

能力	React 18	React 19	影响
表单提交	手写 `useState` + `fetch` + `useEffect`	Actions 原生支持	减少 70% 样板
乐观更新	手写 `useState` + `try/catch` 回滚	`useOptimistic` Hook	一行搞定
表单状态	手动管理 `pending` / `error`	`useActionState` / `useFormStatus`	框架托管
服务端组件	实验（`next/font` 等）	稳定 API	RSC 进生产
文档元数据	需 `react-helmet` / `next/head`	`<title>` / `<meta>` 原生	不再依赖库
`ref` 用法	只能 `useRef` + `forwardRef`	可直接作为 prop 传递	删除 `forwardRef`
Context	值变化全量重渲染	`use(Context)` 支持条件调用	优化粒度更细
资源加载	手动 `<link>` / `preload`	`use(preload)` / `use(ressource)`	原生预加载
错误兜底	`componentDidCatch`	`useEffect` 可返回清理	错误恢复更顺
包大小	较大	移除 `prop-types` 等遗留代码	更小

💡 一句话总结：React 19 把「数据写入」（表单/Actions）、「服务端渲染边界」（RSC）、「文档头」（Metadata）这三件事正式收编进框架，让 React 从一个「纯 UI 库」进化为「全栈应用框架」。

1.2 谁该升级？

场景	建议	理由
新项目	直接用 19	没有任何历史包袱
Next.js / Remix 项目	跟随框架版本	框架已适配 RSC
老 SPA（纯 CSR）	可渐进升级	新 Hook 是渐进增强
大量第三方库未适配	暂缓	见 §9 兼容性清单

二、四大新 Hook 详解

React 19 引入了 4 个与 Actions 深度绑定的 Hook。它们解决的是同一个问题：异步状态管理。

2.1 `useActionState` —— 表单状态机

替代「手写 loading + error + value」三件套。它接收一个 Action 函数，返回 [state, formAction, isPending]。

tsx

// actions.ts
'use server'
async function subscribe(prevState: { error?: string }, formData: FormData) {
  const email = formData.get('email')
  if (!email || !email.includes('@')) {
    return { error: '邮箱格式不正确' }
  }
  await db.subscribe(email) // 假设的后端调用
  return { success: true }
}

tsx

// SubscribeForm.tsx
'use client'
import { useActionState } from 'react'

export function SubscribeForm() {
  const [state, formAction, isPending] = useActionState(subscribe, {
    error: undefined,
  })

  return (
    <form action={formAction}>
      <input name="email" type="email" disabled={isPending} />
      <button disabled={isPending}>
        {isPending ? '提交中…' : '订阅'}
      </button>
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {state.success && <p>订阅成功！</p>}
    </form>
  )
}

关键点：

第一个参数是「上一次的状态」，非常适合做错误兜底和重试。
isPending 由框架自动管理，你不再需要 setLoading(true/false)。
<form action={formAction}> —— 注意这里直接把函数传给 action，这是 HTML 原生表单提交的 React 版。

2.2 `useOptimistic` —— 乐观更新

在做「点赞」「评论」这类交互时，你希望 UI 立刻响应，再等服务器确认。useOptimistic 让这个流程变得极其简洁。

tsx

'use client'
import { useOptimistic, useRef } from 'react'

type LikeState = { count: number; liked: boolean }

function LikeButton({ initial }: { initial: LikeState }) {
  const [optimistic, addOptimistic] = useOptimistic(
    initial,
    (state, _delta: number) => ({
      ...state,
      count: state.count + 1,
      liked: !state.liked,
    }),
  )
  const formRef = useRef<HTMLFormElement>(null)

  async function likeAction() {
    addOptimistic(1) // 立刻更新 UI
    await fetch('/api/like', { method: 'POST' }) // 真实请求
  }

  return (
    <form action={likeAction} ref={formRef}>
      <button>👍 {optimistic.count}</button>
    </form>
  )
}

⚠️ 如果服务器失败，React 会自动把 UI 回滚到真实状态——你不需要手写回滚逻辑。这就是「乐观」二字的代价由框架承担。

2.3 `useFormStatus` —— 在子组件读取表单状态

useFormStatus 的巧妙之处在于：它不需要从父组件透传 props，只要在 <form> 内部的任意子组件里调用，就能拿到整个表单的提交状态。

tsx

'use client'
import { useFormStatus } from 'react'

function SubmitButton() {
  const { pending, data, method, action } = useFormStatus()
  return (
    <button disabled={pending}>
      {pending ? '处理中…' : '提交'}
    </button>
  )
}

// 使用：SubmitButton 不需要任何 props
<form action={someAction}>
  <input name="title" />
  <SubmitButton />  {/* 自动感知 pending */}
</form>

这在「按钮被抽成独立组件」的场景下特别有用——不用再 props.pending 层层透传。

2.4 `use` —— 读取资源与 Context

use 是一个全新的 API，可以在 渲染期间 读取 Promise 或 Context，且支持条件调用（不像 useContext 必须在顶层）。

tsx

import { use } from 'react'

// 读取 Promise（配合 Suspense）
function Comments({ commentsPromise }: { commentsPromise: Promise<Comment[]> }) {
  const comments = use(commentsPromise) // 直接 await 风格的读取
  return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>
}

// 条件读取 Context
function Toolbar({ showUser }: { showUser: boolean }) {
  if (showUser) {
    const user = use(UserContext) // ✅ 条件调用，合法
    return <span>{user.name}</span>
  }
  return null
}

🚀 use(Promise) 配合 <Suspense> 是 RSC 数据流的核心。它让「边渲染边等待数据」成为标准模式。

三、Actions 与表单处理

Actions 是 React 19 的灵魂。它本质上是「一个会在提交时执行的函数」，框架负责接管 loading、错误、重新验证。

3.1 三种 Actions 来源

类型	定义位置	适用场景
客户端 Action	组件内普通 `async function`	纯前端交互
服务端 Action	文件顶部 `'use server'`	需要操作数据库/密钥
库提供 Action	如表单库封装	复用逻辑

3.2 完整表单示例（含校验 + 错误）

tsx

'use client'
import { useActionState } from 'react'

type State = { error?: string; values?: { name: string } }

async function createUser(_prev: State, formData: FormData): Promise<State> {
  const name = String(formData.get('name') || '').trim()
  if (name.length < 2) return { error: '用户名至少 2 个字符' }

  const res = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify({ name }),
  })
  if (!res.ok) return { error: '创建失败，请重试' }

  return { values: { name } }
}

export function UserForm() {
  const [state, action, pending] = useActionState(createUser, {})
  return (
    <form action={action}>
      <input name="name" aria-invalid={!!state.error} />
      {state.error && <span role="alert">{state.error}</span>}
      <button disabled={pending}>创建</button>
    </form>
  )
}

3.3 Actions 的优势总结

自动 Pending：不用手写 loading 态。
请求去重：React 会自动取消过期请求（如快速点击）。
与 RSC 协作：服务端 Action 可直接操作数据库，绕过了传统的 API 层。
渐进增强：即使 JS 未加载，原生 <form action> 仍可提交。

四、Server Components 实战

Server Components（RSC）是 React 19 最具颠覆性的能力，但也是心智负担最重的部分。

4.1 核心心智模型

维度	Server Component	Client Component
执行位置	服务端（Node/Bun）	浏览器 + 服务端（hydration）
能访问数据库	✅ 直接	❌ 需经过 API
能用 `useState` / `useEffect`	❌	✅
包体积	0 KB（不进 bundle）	计入 bundle
文件标记	默认（无 `'use client'`）	顶部加 `'use client'`

4.2 `'use client'` 与 `'use server'` 边界

tsx

// app/page.tsx —— 这是一个 Server Component（默认）
import { db } from '@/lib/db'
import { LikeButton } from './LikeButton' // 这个组件是客户端组件

export default async function Page() {
  const posts = await db.post.findMany() // 直接在服务端读数据库
  return (
    <main>
      <h1>文章列表</h1>
      {posts.map(p => (
        <article key={p.id}>
          <h2>{p.title}</h2>
          <LikeButton initialCount={p.likes} /> {/* 把服务端数据传给客户端组件 */}
        </article>
      ))}
    </main>
  )
}

tsx

// LikeButton.tsx
'use client' // ← 标记边界：从这里往下都是客户端组件
import { useOptimistic } from 'react'

export function LikeButton({ initialCount }: { initialCount: number }) {
  // 这里可以用 hooks
  return <button>👍 {initialCount}</button>
}

边界规则（重要）：

'use client' 是 单向向下 的：被标记的组件及其所有子组件都变成客户端组件。
服务端组件不能 import 客户端组件后再把函数作为 props 传回去（只能传可序列化的值）。
'use server' 标记的函数只能 return 可序列化的值（不能返回 JSX 里的函数）。

4.3 何时用 RSC？

场景	推荐
数据获取 + 渲染（博客/列表）	Server Component
交互（按钮/表单/动画）	Client Component
既要数据又要交互	服务端取数 → props 传给客户端组件
第三方库含 `window` 访问	必须 `'use client'`

五、文档元数据原生支持

在 React 19 之前，要在 SPA 里改 <title> 必须用 react-helmet 或框架方案。现在 原生支持。

5.1 在组件里直接写 `<title>` / `<meta>`

tsx

function BlogPost({ post }: { post: Post }) {
  return (
    <article>
      <title>{post.title}</title>          {/* ✅ 原生支持 */}
      <meta name="description" content={post.excerpt} />  {/* ✅ 原生支持 */}
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  )
}

React 会自动把这些标签「提升」到 <head>，并在组件卸载时清理。这在 SEO 场景 下价值巨大——每个页面可以声明自己的标题和描述，无需额外库。

📌 本站实践：本站（y-m.top）是 VitePress 技术栈，文章 frontmatter 自带 title / description，构建时注入结构化数据。React 19 的元数据方案与这种「每页独立 SEO」思路一致，对有 SEO 需求的 React 项目是直接利好。详见 VitePress SEO 优化指南。

六、其他重要更新

6.1 `ref` 可直接作为 prop

告别 forwardRef！

tsx

// React 18
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />)

// React 19 —— ref 就是普通 prop
function Input({ ref, ...props }: { ref?: Ref<HTMLInputElement> } & InputHTMLAttributes<HTMLInputElement>) {
  return <input ref={ref} {...props} />
}

// 使用
<Input ref={myRef} />

forwardRef 已被官方标记为 可弃用（deprecated），新代码不要再用了。

6.2 `use(Context)` 条件调用

见 §2.4，use 让 Context 读取不再受「必须在顶层 Hook 规则」限制，便于做条件分支。

6.3 资源预加载

React 19 提供 use(preload)、use(preinit) 等原生资源提示：

tsx

import { use } from 'react'

function Avatar({ userPromise }: { userPromise: Promise<User> }) {
  // 预加载脚本/样式，优化首屏
  use(preload, 'https://cdn.example.com/avatar.js', { as: 'script' })
  const user = use(userPromise)
  return <img src={user.avatar} />
}

6.4 `useDeferredValue` 与 `useTransition` 增强

这两个 18 引入的 Hook 在 19 中更稳定，配合 useOptimistic 可构建丝滑的搜索/筛选体验。

七、项目实战：Vite + React 19

我们用 Vite 搭建一个最小但完整的 React 19 应用，包含「待办列表 + 仪表盘」两个页面。

7.1 初始化

bash

pnpm create vite@latest my-app --template react-ts
cd my-app
pnpm add react@19 react-dom@19
pnpm dev

📌 Vite 是 React 19 的最佳开发搭档，详见 Vite 构建工具完全指南。本实战也用 Tailwind CSS v4 做样式。

7.2 待办列表（Actions + useOptimistic）

tsx

// TodoForm.tsx
'use client'
import { useOptimistic, useState } from 'react'

type Todo = { id: number; text: string; done: boolean }

export function TodoList({ initial }: { initial: Todo[] }) {
  const [todos, setTodos] = useState(initial)
  const [optimisticTodos, addOptimistic] = useOptimistic(
    todos,
    (state, newTodo: Todo) => [...state, newTodo],
  )

  async function addTodo(formData: FormData) {
    const text = String(formData.get('text') || '')
    const temp: Todo = { id: Date.now(), text, done: false }
    addOptimistic(temp) // 乐观插入
    const saved = await fetch('/api/todos', {
      method: 'POST',
      body: JSON.stringify({ text }),
    }).then(r => r.json())
    setTodos(prev => [...prev.filter(t => t.id !== temp.id), saved])
  }

  return (
    <>
      <form action={addTodo}>
        <input name="text" placeholder="新任务…" />
        <button>添加</button>
      </form>
      <ul>
        {optimisticTodos.map(t => (
          <li key={t.id} className={t.done ? 'line-through' : ''}>{t.text}</li>
        ))}
      </ul>
    </>
  )
}

7.3 仪表盘（Suspense + use）

tsx

// Dashboard.tsx
import { Suspense, use } from 'react'

function Stats({ dataPromise }: { dataPromise: Promise<Stat[]> }) {
  const data = use(dataPromise) // 读取服务端流式数据
  return (
    <div className="grid grid-cols-3 gap-4">
      {data.map(s => (
        <div key={s.label} className="p-4 rounded-lg bg-white shadow">
          <p className="text-gray-500">{s.label}</p>
          <p className="text-2xl font-bold">{s.value}</p>
        </div>
      ))}
    </div>
  )
}

export function Dashboard({ dataPromise }: { dataPromise: Promise<Stat[]> }) {
  return (
    <Suspense fallback={<div>加载中…</div>}>
      <Stats dataPromise={dataPromise} />
    </Suspense>
  )
}

7.4 目录结构建议

src/
├── app/
│   ├── page.tsx          # Server Component（默认）
│   └── actions.ts        # 'use server' 服务端动作
├── components/
│   ├── TodoList.tsx      # 'use client' 交互组件
│   └── Dashboard.tsx     # 混合组件
├── lib/
│   └── db.ts             # 数据库访问（仅服务端）
└── main.tsx              # 客户端入口

八、React vs Vue 选型对比

本站是 Vue / VitePress 技术栈，但 React 19 的更新也值得前端同学关注。下面是客观对比。

8.1 能力对比表

维度	React 19	Vue 3	说明
心智模型	JSX + Hooks	模板 + Composition API	各有所爱
服务端组件	RSC 正式稳定	无原生 RSC（Nuxt 有 SSR）	React 领先
表单/状态	Actions + useOptimistic	`ref` + `reactive` 天然响应式	Vue 心智更轻
元数据	原生 `<title>`	需 `@vueuse/head` / Nuxt	旗鼓相当
生态	最大（库最多）	适中（官方库质量高）	React 胜
学习曲线	中（Hooks 规则多）	低（模板直观）	Vue 胜
跨端	React Native 成熟	uni-app / Taro	各有所长

8.2 互转建议

Vue → React：重点突破「Hooks 依赖数组」和「RSC 边界」，其余 API 概念基本一一对应（ref≈useRef，computed≈useMemo，watch≈useEffect）。
React → Vue：重点适应「模板语法」和「响应式自动追踪」，会发现很多 Redux 样板可以删掉。

💡 本站观点：内容型站点（如博客、文档）用 Vue + VitePress 更省心；需要复杂数据交互的中后台或全栈应用，React 19 + RSC 的体验已非常成熟。两者并非零和，按团队储备选即可。更多 Vue 实践见 Vue 3 Composition API 最佳实践。

九、18 → 19 升级迁移指南

9.1 破坏性变更清单

变更	影响	处理
`forwardRef` 弃用	大量旧组件	改为 `ref` prop（§6.1）
`ReactDOM.render` 移除	极老项目	用 `createRoot`
`propTypes` 移除	旧代码警告	删除或转 TS
`useRef` 默认值语义变化	边界情况	检查 `undefined` 判断
`StrictMode` 双调用更严格	副作用	确保幂等
`useEffect` 清理时机调整	定时器/订阅	完善 cleanup
JSX 命名空间组件移除	罕见	改显式导入
`react-test-renderer` 弃用	测试	转 `@testing-library/react`

9.2 升级步骤

bash

# 1. 升级核心包
pnpm add react@^19 react-dom@^19

# 2. 升级类型（如用 TS）
pnpm add -D @types/react@^19 @types/react-dom@^19

# 3. 升级官方库（必须兼容 19）
pnpm add react-dom@19        # react-dom/client 已稳定
pnpm update @tanstack/react-query react-router-dom  # 确保版本支持 19

# 4. 跑 codemod（官方提供）
npx react-codemod@latest react-19 <path>

9.3 第三方库兼容性

升级前先确认依赖已支持 19：

bash

# 检查 peerDependencies 冲突
pnpm install 2>&1 | grep -i "react"

常见已适配库：react-router-dom@7、@tanstack/react-query@5、zustand@5、framer-motion@11。仍未适配的库可用 --legacy-peer-deps 临时绕过，但建议等官方更新。

十、常见问题（FAQ）

Q1：Server Components 会不会让前端变复杂？

会的，这是 RSC 最大的争议点。它引入了新的心智边界（'use client' / 'use server'），初学者容易困惑「为什么这个 hook 用不了」。建议：先用纯 Client Component 跑通功能，再逐步把「只读数据展示」下沉到 Server Component。不要过度使用 RSC。

Q2：Suspense 和 use(Promise) 是什么关系？

use(promise) 会「挂起」当前组件，直到 Promise 完成或失败；而 <Suspense fallback> 负责捕获这个「挂起」状态并显示占位。简单说：use 触发等待，Suspense 决定等待时显示什么。两者配合实现流式渲染。

Q3：React 19 还需要 Redux / Zustand 吗？

看规模。React 19 的 useActionState + 服务端 Action 已经能替代大量「表单/请求」类的 Redux 场景。但对于跨页面全局状态（如用户登录态、主题），Zustand / Redux Toolkit 仍然更合适。推荐组合：Actions 管「写入」，轻量 store 管「全局读」。

Q4：React 19 的 Actions 能在纯 CSR（无框架）下用吗？

可以。useActionState / useOptimistic 都是纯客户端 Hook，不需要 Next.js。只要你的 action 函数里自己写 fetch 调用即可（如 §3.2 示例）。RSC 才需要框架支持。

Q5：从 Vue 转 React 19，最难的坑是什么？

两个：① Hooks 依赖数组——忘记加依赖会导致闭包拿到旧值；② RSC 边界——在 Server Component 里误用 useState。建议初期把所有组件都标 'use client'，跑通后再优化。

Q6：useOptimistic 失败后会怎样？

React 会自动将 UI 回滚到 useOptimistic 调用前的真实状态，你无需手写回滚。如果希望展示错误，可以在 Action 里 throw 或在 useActionState 的 state 中返回错误信息。

Q7：React 19 对 SEO 有什么实质帮助？

两点：① 原生 <title> / <meta> 让每页独立元数据更简单；② RSC 默认在服务端渲染 HTML，搜索引擎能直接抓到内容（无需等待 JS hydrate）。对内容站点是直接利好。配合结构化数据效果更好，参考 VitePress SEO 指南。

Q8：学习 React 19 的推荐路径？

先精通 React 18 的 Hooks（useState / useEffect / useContext）。
再学 Actions 三件套（useActionState / useOptimistic / useFormStatus）。
最后理解 RSC（从「Server 取数 → props 下发」的简单模式开始）。
用 Vite 跑一遍 §7 实战，比看文档效率高 3 倍。

总结

React 19 把「表单提交」「服务端数据」「文档元数据」三件最高频的事收编进框架，标志着 React 从 UI 库向全栈框架的跨越。对新项目应直接采用；对老项目可渐进升级，优先享受 ref prop 和 Actions 的红利。

延伸阅读：

Vite 构建工具完全指南 — React 19 开发环境最佳实践
Tailwind CSS v4 实战指南 — 配合 React 的样式方案
Vue 3 Composition API 最佳实践 — Vue 侧技术选型对照
TypeScript 高级类型与实战技巧 — React + TS 类型安全
VitePress SEO 优化指南 — 本站同款 SEO 思路

⚛️ React 19 不是终点，而是「全栈 React」的起点。先用起来，再慢慢吃透 RSC——别被边界规则吓退，绝大多数应用用 Client Component 就够。

延伸阅读

免责声明

本文仅供技术交流和学习参考。涉及第三方服务的链接可能包含 sponsored 标记，请自行核实服务条款、价格和可用性，并遵守当地法律法规。

React 19 实战指南 2026 ​

一、React 19 核心变化 ​

1.1 React 18 vs 19 关键差异 ​

1.2 谁该升级？ ​

二、四大新 Hook 详解 ​

2.1 useActionState —— 表单状态机 ​

2.2 useOptimistic —— 乐观更新 ​

2.3 useFormStatus —— 在子组件读取表单状态 ​

2.4 use —— 读取资源与 Context ​

三、Actions 与表单处理 ​

3.1 三种 Actions 来源 ​

3.2 完整表单示例（含校验 + 错误） ​

3.3 Actions 的优势总结 ​

四、Server Components 实战 ​

4.1 核心心智模型 ​

4.2 'use client' 与 'use server' 边界 ​

4.3 何时用 RSC？ ​

五、文档元数据原生支持 ​

5.1 在组件里直接写 <title> / <meta> ​

六、其他重要更新 ​

6.1 ref 可直接作为 prop ​

6.2 use(Context) 条件调用 ​

6.3 资源预加载 ​

6.4 useDeferredValue 与 useTransition 增强 ​

七、项目实战：Vite + React 19 ​

7.1 初始化 ​

7.2 待办列表（Actions + useOptimistic） ​

7.3 仪表盘（Suspense + use） ​

7.4 目录结构建议 ​

八、React vs Vue 选型对比 ​

8.1 能力对比表 ​

8.2 互转建议 ​

九、18 → 19 升级迁移指南 ​

9.1 破坏性变更清单 ​

9.2 升级步骤 ​

9.3 第三方库兼容性 ​

十、常见问题（FAQ） ​

总结 ​

延伸阅读 ​

React 19 实战指南 2026

一、React 19 核心变化

1.1 React 18 vs 19 关键差异

1.2 谁该升级？

二、四大新 Hook 详解

2.1 `useActionState` —— 表单状态机

2.2 `useOptimistic` —— 乐观更新

2.3 `useFormStatus` —— 在子组件读取表单状态

2.4 `use` —— 读取资源与 Context

三、Actions 与表单处理

3.1 三种 Actions 来源

3.2 完整表单示例（含校验 + 错误）

3.3 Actions 的优势总结

四、Server Components 实战

4.1 核心心智模型

4.2 `'use client'` 与 `'use server'` 边界

4.3 何时用 RSC？

五、文档元数据原生支持

5.1 在组件里直接写 `<title>` / `<meta>`

六、其他重要更新

6.1 `ref` 可直接作为 prop

6.2 `use(Context)` 条件调用

6.3 资源预加载

6.4 `useDeferredValue` 与 `useTransition` 增强

七、项目实战：Vite + React 19

7.1 初始化

7.2 待办列表（Actions + useOptimistic）

7.3 仪表盘（Suspense + use）

7.4 目录结构建议

八、React vs Vue 选型对比

8.1 能力对比表

8.2 互转建议

九、18 → 19 升级迁移指南

9.1 破坏性变更清单

9.2 升级步骤

9.3 第三方库兼容性

十、常见问题（FAQ）

总结

延伸阅读