# React 和 Next.js 现代最佳实践 (2025) ## 目的此技能使用 React 19 和 Next.js App Router 强制实现从客户端同步到 **异步本机** 模式的架构转变。目标是消除不必要的“useEffect”使用，将数据获取移至服务器，并利用服务器组件和服务器操作等现代原语。 ## 核心理念：范式转变 **旧时代（2024 年之前）**：客户端组件安装，然后通过 `useEffect` 与服务器同步 **现代时代（2025 年）**：服务器组件执行异步逻辑，将结果流式传输到客户端这种转变消除了： * 瀑布网络请求 * 效果中的竞争条件 * 布局从加载状态转变 * 异步操作的手动状态管理 * 数据支柱钻探 ## 何时使用此技能激活时间： * 编写新的 React/Next.js 代码 * 从页面路由器迁移到应用程序路由器 * 重构`useEffect`重组件 * 实现形式和突变 * 审查数据获取模式 * 设置身份验证或授权 * 优化React性能 ## 如何使用此技能在查看 React/Next.js 代码时： 1. **识别堆栈** * 检查 `package.json` 的 Next.js 版本 * 检测`app/`目录是否存在（App Router） * 注意是否使用 React 19 2. **扫描代码异味** * 搜索：`useEffect`、`useState`、`useCallback`、`useMemo` * 查找：客户端组件中的“fetch”，用于内部数据的 API 路由 * 查找：`getServerSideProps`、`getStaticProps`（旧模式） 3. **应用下面的清单** * 对于每个问题，提出一个现代的替代方案 * 显示之前/之后的代码示例 4. **确定修复的优先顺序** * 第一：正确性和副作用错误 * 第二：架构和数据获取 * 第三：性能和人体工程学 ** ** ## 检查清单 1：useEffect - “逃生舱口”规则 ### 现代定义 **useEffect 仅用于与 React 控制之外的外部系统同步。** 它不适合： * ❌ 组件挂载时获取数据 * ❌ 从 props 或其他状态派生状态 * ❌ 将 props 镜像到状态中 * ❌ 可以是纯函数的业务逻辑 * ❌ 通用“安装时”初始化它是为了： * ✅ WebSocket 订阅 * ✅ 浏览器 API（localStorage、IntersectionObserver、ResizeObserver） * ✅ DOM 事件监听器（window.resize、scroll） * ✅ 第三方小部件（地图、聊天、分析） * ✅ 与 React 状态相关的计时器（setTimeout、setInterval） ### 反模式#1：派生状态 **❌ 坏 - 对派生状态的影响：** const [firstName, setFirstName] = useState("约翰") const [lastName, setLastName] = useState("Doe") const [fullName, setFullName] = useState("") 使用效果（（）=> { setFullName(`${firstName} ${lastName}`) }, [名字, 姓氏]) **✅ 好 - 在渲染期间计算：** const [firstName, setFirstName] = useState("约翰") const [lastName, setLastName] = useState("Doe") const fullName = `${firstName} ${lastName}` // 只需计算即可！ **为什么**：消除整个渲染周期并保证一致性。 ### 反模式#2：效果中的事件逻辑 **❌ 不好 - 对用户操作使用效果：** const [已提交，已提交] = useState(false) 使用效果（（）=> { 如果（已提交）{ 提交表单（表单数据） } }, [已提交, 表单数据]) // 稍后： **✅ 好 - 直接事件处理程序：** const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() 等待提交表单（formData） } // 稍后：

**为什么**：用户操作应该在事件处理程序中触发，而不是通过状态标志。 ### 反模式#3：挂载时获取数据 **❌ 不好 - 客户端获取生效：** “使用客户端” 函数产品页面（）{ const [产品，setProducts] = useState<产品[]>([]) const [正在加载，setLoading] = useState(true) 使用效果（（）=> { fetch('/api/产品') .then(res => res.json()) .then(数据 => { 设置产品（数据）设置加载（假） }) }, []) 如果（正在加载）返回返回 } **✅ 好 - 带有 async/await 的服务器组件：** // app/products/page.tsx - 服务器组件（无“使用客户端”）从 '@/lib/db' 导入 { db } 导出默认异步函数 ProductsPage() { // 这个在服务器上运行，直接查询DB const products =等待db.select().from(productsTable) 返回 } **为什么**： * 消除加载状态 * 运行距离数据源更近（低延迟） * 客户端包大小没有增加 * 内容由服务器渲染（更好的 SEO） ### 合法的 useEffect 模式 **✅ 好 - 外部系统订阅：** “使用客户端” 函数 ChatRoom({ roomId }: { roomId: string }) { 使用效果（（）=> { const 连接 = createConnection(roomId) 连接.connect() 返回（）=> { 连接.disconnect() // 清理 } }, [房间ID]) 返回

已连接到{roomId}

} **✅ 好 - 浏览器 API 同步：** “使用客户端” 函数 useOnlineStatus() { const [isOnline, setIsOnline] = useState(true) 使用效果（（）=> { const handleOnline = () => setIsOnline(true) const handleOffline = () => setIsOnline(false) window.addEventListener('在线',handleOnline) window.addEventListener('离线',handleOffline) 返回（）=> { window.removeEventListener('在线',handleOnline) window.removeEventListener('离线',handleOffline) } }, []) 返回在线 } ### 用于重复效果的自定义挂钩当相同的效果模式出现多次时： **✅ 提取到自定义挂钩：** // 钩子/useMediaQuery.ts “使用客户端” 导出函数 useMediaQuery(query: string): boolean { const [匹配，setMatches] = useState(false) 使用效果（（）=> { const media = window.matchMedia(query) setMatches(媒体.匹配) const 侦听器 = (e: MediaQueryListEvent) => setMatches(e.matches) media.addEventListener('更改', 监听器) return () => media.removeEventListener('change', 监听器) }, [查询]) 返回匹配项 } // 用法： const isMobile = useMediaQuery('(最大宽度：768px)') ** ** ## 检查表 2：服务器组件和数据获取 ### 默认服务器组件在 Next.js 应用程序路由器（`app/` 目录）中： **✅ 默认：服务器组件（无指令）** // 应用程序/仪表板/page.tsx 从 '@/lib/db' 导入 { db } 导出默认异步函数 DashboardPage() { // 直接数据库访问 - 在服务器上运行 const stats = 等待 db.query.stats.findFirst() 返回

收入：${stats.revenue}

} **✅ 选择加入：客户端组件（带指令）** "use client" // 仅在需要交互时添加从 'react' 导入 { useState } 导出默认函数 Counter() { const [计数，setCount] = useState(0) 返回 } ### 服务器与客户端组件的规则特色|服务器组件 |客户端组件 ---|---|--- **指令** |无（默认）| `“使用客户端”` **数据获取** | `async/await` 数据库查询 | `use()` 或数据库 **互动** | ❌ 没有事件处理程序 | ✅ onClick、onChange 等。 **反应钩子** | ❌ 没有 useState、useEffect | ✅ 所有挂钩均可 **捆绑尺寸** | ✅ 零JS发货 | ❌增加捆绑 **浏览器 API** | ❌没有窗口，localStorage | ✅ 完全访问 **环境变量** | ✅ 私人变量安全 | ⚠️仅限NEXT_PUBLIC_* ### 请求记忆：支柱钻探结束 **问题**：多个组件需要相同的数据。传统解决方案：支柱钻井或 Context。 **解决方案**：使用“React.cache”请求记忆。 **✅ 现代图案 - 无支柱钻孔：** // 库/data.ts 从“反应”导入{缓存} 从 './db' 导入 { db } // 包装在cache()中以自动记忆请求导出 const getCurrentUser = 缓存(async () => { 返回等待 db.query.users.findFirst({ 其中：... }) }) // 应用程序/layout.tsx 从 '@/lib/data' 导入 { getCurrentUser } 导出默认异步函数 RootLayout({ Children }) { const user = wait getCurrentUser() // 调用 #1 返回（ <标头用户={用户} /> {孩子} ） } // 应用程序/个人资料/page.tsx 从 '@/lib/data' 导入 { getCurrentUser } 导出默认异步函数 ProfilePage() { const user = wait getCurrentUser() // 调用 #2 - 相同的请求，已缓存！返回

电子邮件：{user.email}

} **为什么**：两个组件都调用 `getCurrentUser()`，但数据库查询每个请求仅执行一次。没有道具，没有背景，没有练习。 ### use() API：将 Promise 流式传输到客户端 **模式**：服务器组件启动查询，客户端组件显示它。 **✅ 服务器组件（启动获取）：** // 应用程序/搜索/page.tsx 从 '@/lib/db' 导入 { db } 从 './search-results' 导入 { SearchResults } 导出默认异步函数 SearchPage() { // 不要等待 - 直接传递 Promise const resultsPromise = db.query.products.findMany() 返回（ }> ） } **✅ 客户端组件（解开承诺）：** // 应用程序/搜索/搜索结果.tsx “使用客户端” 从“反应”导入{使用} 从 '@/lib/db' 导入类型 { Product } 导出函数 SearchResults({ Promise }: { Promise: Promise }) { // use() 解开承诺 - 暂停直到解决 const 结果 = 使用（承诺）返回（

{product.name}

） } **为什么**： * 初始 HTML 立即发布（有后备） * 服务器解析查询时的数据流 * 改进首次内容绘制 (FCP) ### 客户端/服务器组件组成 **❌ 不好 - 无法在客户端导入服务器组件：** “使用客户端” import { ServerDetails } from './server-details' // 错误！导出函数 ClientCard() { 返回（

{/* 这不起作用 */}

） } **✅ 好 - 将服务器组件作为子组件传递：** // app/page.tsx（服务器组件）从 './client-card' 导入 { ClientCard } 从 './server-details' 导入 { ServerDetails } 导出默认函数 Page() { 返回（ <客户卡> {/* 由服务器组件组成 */} ） } // 客户端卡.tsx “使用客户端” 导出函数 ClientCard({ 孩子 }: { 孩子: React.ReactNode }) { 返回（

{children} {/* 服务器组件在此处渲染 */}

） } ** ** ## 检查表 3：服务器操作和突变 ### 服务器操作与路由处理程序使用案例|工具|为什么 ---|---|--- **表格提交** |服务器操作 |与 React 集成，自动缓存重新验证 **UI 突变（如、删除）** |服务器操作 |类型安全，无需 JS 即可工作（渐进式） **公共 API 端点** |路线处理程序 |移动应用程序、webhooks、第三方访问 **Webhook 接收器** |路线处理程序 |外部系统，不依赖于 UI ### React 19 Form Hooks 三位一体 #### 1\. useActionState - 表单状态管理替换表单错误和提交的手动“useState”。 **✅ 服务器操作：** // 操作/auth.ts “使用服务器” 从 'zod' 导入 { z } const loginSchema = z.object({ 电子邮件：z.string().email(), 密码：z.string().min(8) }) 导出异步函数loginAction（prevState：any，formData：FormData）{ // 验证输入 const 解析 = loginSchema.safeParse({ 电子邮件：formData.get('电子邮件'), 密码：formData.get('密码') }) if (!parsed.success) { 返回 { 错误：parsed.error.flatten().fieldErrors } } // 执行登录 const 结果 = 等待登录(parsed.data) 如果（！结果。成功）{ 返回 { 错误：{ _form：['无效的凭据'] } } } 重定向（'/仪表板'） } **✅ 客户端组件（表单）：** “使用客户端” 从 'react' 导入 { useActionState } 从'@/actions/auth'导入{loginAction} 导出函数LoginForm() { const [状态，formAction，isPending] = useActionState(loginAction，null) 返回（ <表单操作={formAction}> <输入名称=“电子邮件”类型=“电子邮件”/> {state?.errors?.email && {state.errors.email}} <输入名称=“密码”类型=“密码”/> {state?.errors?.password && {state.errors.password}} <按钮类型=“提交”禁用= {isPending}> {正在等待？ '正在登录...' : '登录'} {状态？.错误？._form && {state.errors._form}} ） } **要点**： * 服务器操作签名：`(prevState, formData) => newState` * `isPending` 自动跟踪提交 * 表单无需 JavaScript 即可运行（渐进增强） #### 2\. useFormStatus - 子组件 UI 允许“”的任何子级访问表单的挂起状态。 **✅ 提取提交按钮：** “使用客户端” 从 'react-dom' 导入 { useFormStatus } 导出函数 SubmitButton() { const { 待处理 } = useFormStatus() 返回（ <按钮类型=“提交”禁用= {待处理}> {待定？ '正在提交...' : '提交'} ） } **✅ 使用形式：** <表单操作={formAction}> <输入名称=“标题”/> {/* 自动了解表单状态 */} **约束** ：必须在 _child_ 组件中使用，而不是在渲染 `` 的同一组件中使用。 #### 3\. useOptimistic - 即时 UI 更新在服务器操作处理时立即更新 UI。 **✅ 乐观点赞按钮：** “使用客户端” 从 'react' 导入 { useOptimistic } 从 '@/actions/posts' 导入 { likePost } 导出函数 LikeButton({ postId, initialLikes }: Props) { const [optimisticLikes, addOptimisticLike] = useOptimistic( 最初的喜欢，（状态，金额：数字）=>状态+金额）返回（ <表格动作={异步()=>{ // 立即更新UI 添加乐观点赞(1) // 服务器操作在后台运行等待 likePost(postId) }} > ） } **行为**： * 单击按钮时 UI 立即更新 * 后台服务器操作进程 * 如果成功：父级用真实数据重新渲染，乐观状态被丢弃 * 如果失败：乐观更新自动回滚 ** ** ## 检查表 4：服务器操作的安全标准 ### 规则 1：始终验证输入 **❌ 不好 - 信任 FormData：** “使用服务器” 导出异步函数 updateUser(formData: FormData) { const email = formData.get('email') // 可以是任何东西！等待 db.update(users).set({ email }) } **✅ 好 - Zod 验证：** “使用服务器” 从 'zod' 导入 { z } const updateUserSchema = z.object({ 电子邮件：z.string().email(), 名称：z.string().min(2).max(100) }) 导出异步函数 updateUser(formData: FormData) { const 解析 = updateUserSchema.safeParse({ 电子邮件：formData.get('电子邮件'), 名称：formData.get('名称') }) if (!parsed.success) { 返回 { 错误：parsed.error.flatten().fieldErrors } } 等待 db.update(users).set(parsed.data) 返回 { 成功：真 } } ### 规则 2：始终进行身份验证 **❌ 不好 - 没有身份验证：** “使用服务器” 导出异步函数deletePost(postId: string) { 等待 db.delete(posts).where(eq(posts.id, postId)) } **✅ 好 - 首先进行身份验证：** “使用服务器” 从 '@/lib/auth' 导入 { auth } 导出异步函数deletePost(postId: string) { const 会话 = 等待 auth() if (!session?.user) { 抛出新错误（'未经授权'） } // 验证所有权 const post = 等待 db.query.posts.findFirst({ 其中： eq(posts.id, postId) }) if (post.authorId !== session.user.id) { 抛出新错误（'禁止'） } 等待 db.delete(posts).where(eq(posts.id, postId)) revalidatePath('/帖子') } ### 规则 3：模块级操作（非内联） **❌ 不好 - 带闭包的内联操作：** 导出默认异步函数 Page() { const SecretKey = process.env.SECRET_KEY // 敏感！异步函数危险动作() { “使用服务器” // 该闭包已加密但发送到客户端 console.log(secretKey) // 有风险！ } 返回 ... } **✅ 好 - 模块级操作：** // 动作/posts.ts “使用服务器” 导出异步函数 createPost(formData: FormData) { const SecretKey = process.env.SECRET_KEY // 保留在服务器上 // 安全 - 无闭包，仅显式参数 } // 应用程序/page.tsx 从 '@/actions/posts' 导入 { createPost } 导出默认函数 Page() { 返回 } ### 规则 4：速率限制添加速率限制以防止滥用： “使用服务器” 从'@/lib/rate-limit'导入{ratelimit} 导出异步函数 sendEmail(formData: FormData) { const 会话 = 等待 auth() if (!session?.user) throw new Error('未经授权') const { success } =等待ratelimit.limit(session.user.id) 如果（！成功）{ return { error: '请求太多。稍后再试。 } } // 继续执行操作... } ** ** ## 检查表 5：性能优化 ### 消除客户端瀑布 **❌ 不好 - 顺序客户端获取：** “使用客户端” 功能仪表板（）{ const [用户，setUser] = useState(null) const [帖子，setPosts] = useState([]) 使用效果（（）=> { fetch('/api/user').then(r => r.json()).then(setUser) }, []) 使用效果（（）=> { 如果（用户）{ // 等待用户获取！ fetch(`/api/posts?userId=${user.id}`).then(r => r.json()).then(setPosts) } }，[用户]）返回

...

} **✅ 好 - 并行服务器获取：** // 应用程序/仪表板/page.tsx 从 '@/lib/db' 导入 { db } 导出默认异步函数 Dashboard() { // 两个查询在服务器上并行运行 const [用户，帖子] =等待 Promise.all([ db.query.users.findFirst(), db.query.posts.findMany() ]）返回 } ### 捆绑包大小优化 **✅ 延迟加载重型客户端组件：** 从“下一个/动态”导入动态 const RichTextEditor = 动态(() => import('@/components/editor'), { 正在加载：() =>

正在加载编辑器...

, ssr: false // 不在服务器上渲染 }) 导出默认函数 Page() { 返回 } **✅ 将繁重的库保留在服务器组件中：** // 服务器组件 - markdown 库保留在服务器上从“标记”导入{标记} 导出默认异步函数 BlogPost({ slug }: Props) { const post = 等待 getPost(slug) const html = Marked(post.content) // 在服务器上运行返回 } ### React 编译器 (React 19) 启用 React 编译器后： * ✅ 自动记忆组件和值 * ✅ 消除大部分 `useMemo` 和 `useCallback` * ✅ 专注于业务逻辑，而不是性能管道 **之前（手动记忆）：** const SortedUsers = useMemo(() => { return users.sort((a, b) => a.name.localeCompare(b.name)) }，[用户]） const handleClick = useCallback(() => { console.log('点击') }, []) **之后（React编译器处理它）：** // 只需编写普通代码 - 编译器会优化 const SortedUsers = users.sort((a, b) => a.name.localeCompare(b.name)) const handleClick = () => { console.log('点击') } ** ** ## 检查表 6：从遗留模式迁移 ### 类组件 → 函数组件 **❌ 旧版类：** 类 UserProfile 扩展 React.Component { 状态 = { 用户：空 } 组件DidMount() { fetchUser().then(user => this.setState({ user })) } 渲染（）{ 返回

{this.state.user?.name}

} } **✅ 现代功能组件：** // 服务器组件 - 不需要钩子！导出默认异步函数 UserProfile() { const 用户 = 等待 fetchUser() 返回

{用户名}

} ### getServerSideProps → 服务器组件 **❌ 旧版页面路由器：** // 页面/products.tsx 导出异步函数 getServerSideProps() { const products = 等待 db.query.products.findMany() 返回 { 道具：{ 产品 } } } 导出默认函数 ProductsPage({ products }) { 返回 } **✅ 现代应用程序路由器：** // 应用程序/产品/page.tsx 导出默认异步函数 ProductsPage() { const products = 等待 db.query.products.findMany() 返回 } **优点**：更简单，概念更少，更可组合。 ### API 路由 → 服务器操作 **❌ 旧版 API 路线：** // 页面/api/users.ts 导出默认异步函数处理程序（req，res）{ if (req.method === 'POST') { const { 姓名，电子邮件 } = 请求正文 const user = wait createUser({ 姓名, 电子邮件 }) res.json({ 用户 }) } } **✅ 现代服务器操作：** // 操作/users.ts “使用服务器” 导出异步函数createUserAction(formData: FormData) { const 用户 = 等待 createUser({ 名称：formData.get('名称'), 电子邮件：formData.get('电子邮件') }) 重新验证路径（'/用户'）返回 { 成功：true，用户 } } ** ** ## 快速参考：决策矩阵 ### 何时使用每种模式：场景|解决方案 |关键工具 ---|---|--- **初始页面数据** |服务器组件异步/等待 | `等待数据库查询` **交互式列表/表格** |客户端组件 + 服务器操作 | `useActionState` **实时投票** |客户端组件 + TanStack 查询 | `useQuery({ refetchInterval })` **乐观更新** |客户端组件 | `使用乐观` **WebSocket/外部子** |客户端组件 | `useEffect` \+ 清理 **浏览器 API 同步** |定制挂钩| `useSyncExternalStore` **公共 API 端点** |路线处理程序 | `app/api/route.ts` **带有验证的表单** |服务器操作 + Zod | `useActionState` **衍生价值** |渲染计算| `const x = a + b` **用户事件逻辑** |事件处理程序| `onClick`, `onSubmit` ** ** ## 代码审查的响应格式使用此技能进行代码审查时： ### 1\.总结对代码库的现代化程度以及最大的胜利在哪里进行高级评估。 ### 2\.结构化审查 **A。使用效果和副作用** * 发现的问题：列出任何不必要的影响 * 建议的重构：显示具体的替代方案 * 代码示例：至少一个之前/之后 **B。数据获取和服务器使用** * 发现的问题：客户端获取、内部数据的 API 路由 * 建议的重构：移至服务器组件 * 代码示例：服务器组件实现 **C。挂钩和状态管理** * 发现的问题：不必要的 useState、缺少 memoization * 建议重构：导出状态，使用表单钩子 * 代码示例：useActionState实现 **D。组件结构** * 发现的问题：大型组件、不正确的客户端/服务器边界 * 建议重构：拆分组件、组合模式 * 代码示例：正确的组件架构 ### 3\.下一步可操作项目的优先列表： *“重构用户配置文件页面数据获取到服务器组件” *“用 useActionState 替换基于 useEffect 的表单处理” *“提取 useMediaQuery 自定义挂钩以实现响应式逻辑” *“为所有服务器操作添加 Zod 验证” ** ** ## 要避免的常见错误 ### 1\.顶层“使用客户端” **❌ 坏：** “use client” // 整个树都是客户端！导出默认函数Layout({children}){ 返回

{children}

} **✅ 好：** // 布局是服务器组件导出默认函数Layout({children}){ 返回（

{/* 只有这个才是“使用客户端” */} {孩子}

） } ### 2\.混合服务器和客户端导入 **❌ 坏：** “使用客户端” import { db } from '@/lib/db' // 错误：无法导入服务器代码导出函数 ClientComponent() { // db 在浏览器中不可用！ } **✅ 好：** // 将来自服务器组件的数据作为 props 传递导出函数 ClientComponent({ data }: { data: Data }) { // 使用这里的数据 } ### 3\.不处理错误 **❌ 坏：** “使用服务器” 导出异步函数deleteUser(userId: string) { 等待 db.delete(users).where(eq(users.id, userId)) // 没有错误处理！ } **✅ 好：** “使用服务器” 导出异步函数deleteUser(userId: string) { 尝试{ const 会话 = 等待 auth() if (!session?.user) { 返回 { 错误：'未经授权'} } 等待 db.delete(users).where(eq(users.id, userId)) 重新验证路径（'/用户'）返回 { 成功：真 } } 捕获（错误）{ console.error('删除用户失败：', error) return { error: '删除用户失败' } } } ** ** ## 其他资源 * [React 19 文档 - 你可能不需要效果]() * [Next.js 应用路由器文档]() * [React 服务器组件 RFC]() * [服务器操作和突变]() ** ** ## 示例 ### 示例 1：使用服务器操作完成表单 **服务器操作：** // 动作/create-post.ts “使用服务器” 从 'zod' 导入 { z } 从 '@/lib/auth' 导入 { auth } 从 '@/lib/db' 导入 { db } 从 'next/cache' 导入 { revalidatePath } const createPostSchema = z.object({ 标题: z.string().min(3).max(100), 内容：z.string().min(10) }) 导出异步函数 createPostAction(prevState: any, formData: FormData) { const 会话 = 等待 auth() if (!session?.user) { return { error: { _form: ['您必须登录'] } } } const 解析 = createPostSchema.safeParse({ 标题：formData.get('标题'), 内容：formData.get('内容') }) if (!parsed.success) { 返回 { 错误：parsed.error.flatten().fieldErrors } } 尝试{ 等待 db.insert(posts).values({ ...解析的数据，作者Id：会话.用户.id }) revalidatePath('/帖子') 返回 { 成功：真 } } 捕获（错误）{ return { error: { _form: ['无法创建帖子'] } } } } **表单组件：** // 组件/create-post-form.tsx “使用客户端” 从 'react' 导入 { useActionState } 从 'react-dom' 导入 { useFormStatus } 从 '@/actions/create-post' 导入 { createPostAction } 函数提交按钮() { const { 待处理 } = useFormStatus() 返回（ <按钮类型=“提交”禁用= {待处理}> {待定？ '创建...' : '创建帖子'} ） } 导出函数 CreatePostForm() { const [状态，formAction] = useActionState(createPostAction，null) 返回（

标题 {状态？.错误？.标题 && (

{state.errors.title}

)}

内容

{状态？.错误？.内容 && (
              <p className="error">{state.errors.content}</p>
            )}
          </div>
    
          {状态？.错误？._form && (
            <p className="error">{state.errors._form}</p>
          )}
    
          {state?.success && <p className="success">帖子已创建！</p>}
    
          <提交按钮/>
        </形式>
      ）
    }

### 示例 2：乐观更新
    
    
    // 组件/like-button.tsx
    “使用客户端”
    
    从 'react' 导入 { useOptimistic }
    从 '@/actions/posts' 导入 { likePost }
    
    接口道具 {
      帖子 ID：字符串
      初始点赞数： 数量
      用户已喜欢：布尔值
    }
    
    导出函数 LikeButton({ postId, initialLikes, userHasLiked }: Props) {
      const [optimisticLikes, addOptimistic] = useOptimistic(
        { 喜欢：initialLikes，喜欢：userHasLiked }，
        （状态，newLiked：布尔值）=>（{
          喜欢：state.likes + (newLiked ? 1 : -1),
          喜欢： 新喜欢
        })
      ）
    
      返回（
        <表格
          动作={异步()=>{
            const newLiked = !optimisticLikes.liked
            添加乐观（新喜欢）
            等待 likePost(postId, newLiked)
          }}
        >
          <按钮类型=“提交”>
            {乐观的喜欢.喜欢？ '❤️' : '🤍'} {optimisticLikes.likes}
          </按钮>
        </形式>
      ）
    }

** **

## 总结：2025 年反应心智模型

**数据流从服务器→客户端**

* 服务器组件获取和渲染
  * 客户端组件添加交互性
  * 永远不要获取效果

**突变流从客户端→服务器→客户端**

* 用户在客户端组件中触发操作
  * 服务器Action进程在服务器上
  * 结果流返回客户端组件

**效果仅适用于外部系统**

* WebSockets、计时器、浏览器 API
  * 不针对数据，不针对业务逻辑
  * 使用自定义钩子来重复模式

**表格是声明性的**

* `<form action={serverAction}>` \- 没有事件处理程序
  * `useActionState` 用于状态/错误
  * `useFormStatus` 用于待处理的 UI
  * `useOptimistic` 用于即时反馈

这是现代的 React 架构：**异步原生、服务器优先、效果最小。**</article></body></html>

反应下一个现代

包含技能