{"id":208,"date":"2026-07-17T09:46:36","date_gmt":"2026-07-17T01:46:36","guid":{"rendered":"https:\/\/yykcj.com\/?p=208"},"modified":"2026-07-17T09:46:36","modified_gmt":"2026-07-17T01:46:36","slug":"react-19-%e6%96%b0%e7%89%b9%e6%80%a7%e5%ae%9e%e6%88%98%ef%bc%9auseoptimistic%e3%80%81useactionstate-%e4%b8%8e-server-components-%e6%b7%b1%e5%ba%a6%e8%a7%a3%e6%9e%90","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=208","title":{"rendered":"React 19 \u65b0\u7279\u6027\u5b9e\u6218\uff1auseOptimistic\u3001useActionState \u4e0e Server Components \u6df1\u5ea6\u89e3\u6790"},"content":{"rendered":"

\u5f15\u8a00<\/h2>\n

React 19 \u7ec8\u4e8e\u6765\u4e86\uff01\u867d\u7136\u5b83\u6700\u521d\u88ab\u79f0\u4e3a\u201cReact 18.3\u201d\uff0c\u4f46\u6700\u7ec8\u4ee5 19 \u7684\u7248\u672c\u53f7\u53d1\u5e03\uff0c\u5e26\u6765\u4e86\u8bb8\u591a\u4ee4\u4eba\u5174\u594b\u7684\u65b0\u7279\u6027\u3002\u672c\u6587\u5c06\u901a\u8fc7\u4e09\u4e2a\u5b9e\u6218\u573a\u666f\uff0c\u5e26\u4f60\u5feb\u901f\u638c\u63e1 React 19 \u7684\u6838\u5fc3\u65b0\u529f\u80fd\uff1auseOptimistic<\/strong>\u3001useActionState<\/strong> \u4ee5\u53ca Server Components<\/strong>\u3002<\/p>\n

1. useOptimistic\uff1a\u8ba9 UI \u5373\u65f6\u54cd\u5e94<\/h2>\n

\u573a\u666f\uff1a\u70b9\u8d5e\u529f\u80fd<\/h3>\n

\u5728\u4f20\u7edf\u5b9e\u73b0\u4e2d\uff0c\u7528\u6237\u70b9\u51fb\u70b9\u8d5e\u6309\u94ae\u540e\uff0c\u9700\u8981\u7b49\u5f85 API \u54cd\u5e94\u624d\u80fd\u66f4\u65b0 UI\uff0c\u8fd9\u4f1a\u5bfc\u81f4\u660e\u663e\u7684\u5ef6\u8fdf\u3002useOptimistic \u5141\u8bb8\u4f60\u5728 API \u8bf7\u6c42\u5b8c\u6210\u524d\u5c31\u4e50\u89c2\u5730\u66f4\u65b0 UI\uff0c\u5982\u679c\u8bf7\u6c42\u5931\u8d25\u518d\u56de\u6eda\u3002<\/p>\n

\u5b9e\u6218\u4ee3\u7801<\/h3>\n
\nimport { useOptimistic, useState } from 'react';\n\nfunction LikeButton({ initialLikes }) {\n  const [likes, setLikes] = useState(initialLikes);\n  const [optimisticLikes, addOptimistic] = useOptimistic(\n    likes,\n    (state, newLikes) => state + 1\n  );\n\n  const handleLike = async () => {\n    addOptimistic(1); \/\/ \u7acb\u5373\u4e50\u89c2\u66f4\u65b0\n    try {\n      const response = await fetch('\/api\/like', { method: 'POST' });\n      const data = await response.json();\n      setLikes(data.likes); \/\/ \u7528\u771f\u5b9e\u6570\u636e\u66f4\u65b0\n    } catch {\n      \/\/ \u8bf7\u6c42\u5931\u8d25\uff0cuseOptimistic \u4f1a\u81ea\u52a8\u56de\u6eda\n    }\n  };\n\n  return (\n    <button onClick={handleLike}>\n      \ud83d\udc4d {optimisticLikes}\n    <\/button>\n  );\n}\n<\/code><\/pre>\n
\u6ce8\u610f<\/strong>\uff1auseOptimistic<\/code> \u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u521d\u59cb\u72b6\u6001\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u66f4\u65b0\u51fd\u6570\u3002\u66f4\u65b0\u51fd\u6570\u63a5\u6536\u5f53\u524d\u72b6\u6001\u548c\u4f20\u5165\u7684\u503c\uff0c\u8fd4\u56de\u65b0\u7684\u4e50\u89c2\u72b6\u6001\u3002\u5f53\u5f02\u6b65\u64cd\u4f5c\u5b8c\u6210\u6216\u5931\u8d25\u65f6\uff0cReact \u4f1a\u81ea\u52a8\u6839\u636e\u6700\u7ec8\u72b6\u6001\u8c03\u6574 UI\u3002<\/p>\n
2. useActionState\uff1a\u7b80\u5316\u8868\u5355\u5904\u7406<\/h2>\n
\u573a\u666f\uff1a\u767b\u5f55\u8868\u5355<\/h3>\n
useActionState<\/code> \u662f React 19 \u4e2d\u5904\u7406\u8868\u5355\u7684\u65b0 Hook\uff0c\u5b83\u7ed3\u5408\u4e86\u8868\u5355\u72b6\u6001\u7ba1\u7406\u548c\u5f02\u6b65\u64cd\u4f5c\uff0c\u7279\u522b\u9002\u5408\u4e0e Server Actions \u914d\u5408\u4f7f\u7528\u3002<\/p>\n
\u5b9e\u6218\u4ee3\u7801<\/h3>\n
\nimport { useActionState } from 'react';\n\nfunction LoginForm() {\n  const [state, formAction, isPending] = useActionState(\n    async (prevState, formData) => {\n      const email = formData.get('email');\n      const password = formData.get('password');\n      \n      \/\/ \u6a21\u62df API \u8c03\u7528\n      const response = await fetch('\/api\/login', {\n        method: 'POST',\n        body: JSON.stringify({ email, password }),\n      });\n      \n      if (!response.ok) {\n        return { error: '\u767b\u5f55\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u90ae\u7bb1\u548c\u5bc6\u7801' };\n      }\n      \n      return { success: true };\n    },\n    { error: null, success: false }\n  );\n\n  return (\n    <form action={formAction}>\n      <input name="email" type="email" required \/>\n      <input name="password" type="password" required \/>\n      <button type="submit" disabled={isPending}>\n        {isPending ? '\u767b\u5f55\u4e2d...' : '\u767b\u5f55'}\n      <\/button>\n      {state.error && <p style={{ color: 'red' }}>{state.error}<\/p>}\n      {state.success && <p>\u767b\u5f55\u6210\u529f\uff01<\/p>}\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
\ud83d\udca1 \u4f7f\u7528\u6280\u5de7<\/strong>\uff1auseActionState<\/code> \u7684\u7b2c\u4e09\u4e2a\u8fd4\u56de\u503c isPending<\/code> \u53ef\u4ee5\u8f7b\u677e\u63a7\u5236\u6309\u94ae\u7684\u52a0\u8f7d\u72b6\u6001\u3002\u6ce8\u610f\u8868\u5355\u7684 action<\/code> \u5c5e\u6027\u76f4\u63a5\u7ed1\u5b9a\u5230 formAction<\/code>\uff0c\u4e0d\u518d\u9700\u8981 onSubmit<\/code> \u4e8b\u4ef6\u3002<\/p>\n
3. Server Components\uff1a\u63d0\u5347\u6027\u80fd\u7684\u65b0\u8303\u5f0f<\/h2>\n
\u573a\u666f\uff1a\u5c55\u793a\u6587\u7ae0\u5217\u8868<\/h3>\n
Server Components \u5141\u8bb8\u4f60\u5728\u670d\u52a1\u7aef\u6e32\u67d3\u7ec4\u4ef6\uff0c\u51cf\u5c11\u5ba2\u6237\u7aef JavaScript \u4f53\u79ef\uff0c\u63d0\u5347\u9996\u5c4f\u52a0\u8f7d\u901f\u5ea6\u3002<\/p>\n
\u5b9e\u6218\u4ee3\u7801<\/h3>\n
\u9996\u5148\uff0c\u786e\u4fdd\u4f60\u7684\u9879\u76ee\u652f\u6301 React 19 \u548c Next.js 14+\u3002\u521b\u5efa\u4e00\u4e2a Server Component\uff1a<\/p>\n
\n\/\/ app\/articles\/page.jsx (Server Component)\nimport ArticleCard from '.\/ArticleCard'; \/\/ Client Component\n\nexport default async function ArticlesPage() {\n  const res = await fetch('https:\/\/api.example.com\/articles');\n  const articles = await res.json();\n\n  return (\n    <div>\n      <h1>\u6700\u65b0\u6587\u7ae0<\/h1>\n      {articles.map(article => (\n        <ArticleCard key={article.id} article={article} \/>\n      ))}\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
\u800c ArticleCard<\/code> \u53ef\u4ee5\u662f\u4e00\u4e2a Client Component\uff08\u5982\u679c\u9700\u8981\u4ea4\u4e92\uff09\uff1a<\/p>\n
\n\/\/ app\/articles\/ArticleCard.jsx (Client Component)\n'use client';\n\nexport default function ArticleCard({ article }) {\n  const [liked, setLiked] = useState(false);\n\n  return (\n    <div>\n      <h2>{article.title}<\/h2>\n      <p>{article.summary}<\/p>\n      <button onClick={() => setLiked(!liked)}>\n        {liked ? '\u2764\ufe0f' : '\ud83e\udd0d'}\n      <\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
\u5173\u952e\u70b9<\/strong>\uff1a<\/p>\n