import { useActionState } from 'react';

// 一個(gè)模擬的異步 API 調(diào)用
async function updateName(formData) {
  const name = formData.get('name');
  if (!name) {
    return 'Name is required';
  }
  // 模擬網(wǎng)絡(luò)請求
  await new Promise(resolve => setTimeout(resolve, 1000));
  return null; // 表示成功
}

function NameForm() {
  // useActionState 接收一個(gè)異步函數(shù)和初始狀態(tài)
  // 返回 [錯(cuò)誤狀態(tài), 提交動(dòng)作, 是否進(jìn)行中]
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData);
      return error;
    },
    null // 初始狀態(tài)為 null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Updating...' : 'Update'}
      </button>
      {error && <p style={{color: 'red'}}>{error}</p>}
    </form>
  );
}

import { useOptimistic, useState } from 'react';

function LikeButton({ initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  // useOptimistic 接收當(dāng)前狀態(tài)
  // 返回一個(gè)樂觀狀態(tài)和一個(gè)更新函數(shù)
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(
    likes,
    (currentState, amount) => currentState + amount
  );

  const handleClick = async () => {
    // 立即樂觀地更新 UI
    setOptimisticLikes(1);
    // 模擬向服務(wù)器發(fā)送請求
    await likePost(); 
    // 實(shí)際更新狀態(tài)
    setLikes((prev) => prev + 1);
  };

  return (
    <button onClick={handleClick}>
      {optimisticLikes} Likes {/* 按鈕上的數(shù)字會立即增加 */}
    </button>
  );
}

import { useFormStatus } from 'react-dom';

// 這是一個(gè)位于 <form> 內(nèi)部的子組件
function AdvancedFormStatus() {
  const { pending, data, method } = useFormStatus();

  return (
    <div style={{ opacity: pending ? 0.7 : 1 }}>
      {/* 顯示提交狀態(tài) */}
      <button type="submit" disabled={pending}>
        {pending ? (method === 'POST' ? '提交中...' : '獲取中...') : '提交'}
      </button>

      {/* 如果正在提交，顯示正在提交的數(shù)據(jù)預(yù)覽 */}
      {pending && data && (
        <div>
          <p>正在提交的數(shù)據(jù)：</p>
          <ul>
            {/* 遍歷顯示所有表單項(xiàng) */}
            {Array.from(data.entries()).map(([key, value], index) => (
              <li key={index}>{key}: {value.toString()}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

// 在父組件中使用
function MyForm() {
  async function handleSubmit(formData) {
    // 你的表單提交邏輯
    console.log('提交數(shù)據(jù)：', Object.fromEntries(formData));
    // 模擬網(wǎng)絡(luò)請求
    await new Promise(resolve => setTimeout(resolve, 2000));
  }

  return (
    <form action={handleSubmit}>
      <input type="text" name="username" placeholder="用戶名" />
      <input type="email" name="email" placeholder="郵箱" />
      <AdvancedFormStatus />
    </form>
  );
}

import { use, Suspense } from 'react';

// 一個(gè)模擬的數(shù)據(jù)獲取函數(shù)，返回 Promise
function fetchComments() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(['Great post!', 'Thanks for sharing.']);
    }, 1000);
  });
}

function Comments({ commentsPromise }) {
  // 使用 use Hook 來解析 Promise
  // 需要與 Suspense 配合使用以顯示加載狀態(tài)
  const comments = use(commentsPromise);
  return comments.map((comment, index) => <p key={index}>{comment}</p>);
}

function BlogPost() {
  // 將 Promise 作為 prop 傳遞給 Comments 組件
  return (
    <div>
      <h1>My Blog Post</h1>
      <Suspense fallback={<div>Loading comments...</div>}>
        <Comments commentsPromise={fetchComments()} />
      </Suspense>
    </div>
  );
}

// ProductDetails.server.js - 服務(wù)端組件
// 服務(wù)端組件可以是異步的，直接訪問后端資源
async function ProductDetails({ productId }) {
  // 在服務(wù)端直接獲取數(shù)據(jù)
  const product = await db.products.get(productId);

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      {/* 在服務(wù)端組件內(nèi)部嵌套客戶端交互組件 */}
      <AddToCartButton product={product} />
    </div>
  );
}

// AddToCartButton.client.js - 客戶端組件
// 使用 "use client" 指令標(biāo)記
'use client';
import { useOptimistic } from 'react';

function AddToCartButton({ product }) {
  const [cart, setCart] = useOptimistic([]);

  const addToCart = async () => {
    // ... 客戶端交互邏輯
  };

  return <button onClick={addToCart}>Add to Cart</button>;
}

function BlogPost({ post }) {
  return (
    <article>
      {/* 這些標(biāo)簽會被自動(dòng)提升到 <head> 中 */}
      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta name="keywords" content={post.keywords} />
      <link rel="canonical" href={post.canonicalUrl} />

      {/* 頁面內(nèi)容 */}
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </article>
  );
}

import { preload, preinit } from 'react-dom';

function ProductPage() {
  // 預(yù)加載重要字體，避免頁面渲染時(shí)的字體閃爍
  preload('/fonts/main-font.woff2', { as: 'font', type: 'font/woff2' });
  // 預(yù)初始化關(guān)鍵腳本，加快其執(zhí)行速度
  preinit('/js/critical-checkout.js', { as: 'script' });

  return (
    <div>
      {/* 頁面內(nèi)容 */}
    </div>
  );
}

// React 19 之前：需要 forwardRef
const MyInput = React.forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

// React 19：直接作為 prop 使用
function MyInput({ ref, ...props }) {
  return <input {...props} ref={ref} />;
}

function App() {
  const inputRef = useRef(null);
  return <MyInput ref={inputRef} />;
}

// 之前
<ThemeContext.Provider value="dark">
  <Children />
</ThemeContext.Provider>

// React 19 簡化語法
<ThemeContext value="dark">
  <Children />
</ThemeContext>

// 開發(fā)者編寫的代碼
function MyComponent({ data }) {
  const transformedData = expensiveTransformation(data);
  return <div>{transformedData}</div>;
}

// React Compiler 可能會在背后自動(dòng)優(yōu)化，類似于：
function MyComponent_optimized({ data }) {
  const transformedData = useMemo(() => expensiveTransformation(data), [data]);
  return <div>{transformedData}</div>;
}