React 19 全面指南與功能開箱 探索 Server Component 與 Actions 於非同步處理之優化

import { useState } from "react";

export default function TodoApp() {
  const [items, setItems] = useState([{ text: "我的第一個待辦事項" }]);

  async function formAction(formData) {
    const newItem = formData.get("item");
    // 可以向伺服器發送 POST 請求來儲存新項目
    setItems((items) => [...items, { text: newItem }]);
  }

  return (
    <>
      <h1>待辦清單</h1>
      <form action={formAction}>
        <input type="text" name="item" placeholder="新增待辦..." />
        <button type="submit">新增</button>
      </form>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item.text}</li>
        ))}
      </ul>
    </>
  );
}

// 使用 Actions 的待處理狀態
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect("/path");
    });
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        更新
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

// 使用 <form> Actions 和 useActionState
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        更新
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

import { use } from "react";

function Comments({ commentsPromise }) {
  // `use` 會在 promise 解決之前進行 suspend
  const comments = use(commentsPromise);
  return comments.map((comment) => <p key={comment.id}>{comment}</p>);
}

function Page({ commentsPromise }) {
  // 當 `use` 在 Comments 中 suspend 時，
  // 這個 Suspense 邊界會顯示
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

function MyInput({ placeholder, ref }) {
  return (
    <input
      placeholder={placeholder}
      ref={(ref) => {
        // ref 被創建

        // 新增：返回一個清理函式，當元素從 DOM 中移除時重置 ref
        return () => {
          // ref 清理邏輯
        };
      }}
    />
  );
}

// 使用時：
<MyInput ref={ref} />;

function Search({ deferredValue }) {
  // 初次渲染時，value 是空字串 ('')。
  // 隨後會安排在背景中使用 deferredValue 重新渲染。
  const value = useDeferredValue(deferredValue, "");

  return <Results query={value} />;
}

function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>Eee equals em-see-squared...</p>
    </article>
  );
}

function ComponentOne() {
  return (
    <Suspense fallback="loading...">
      <link rel="stylesheet" href="foo" precedence="default" />
      <link rel="stylesheet" href="bar" precedence="high" />
      <article className="foo-class bar-class">
        {...}
      </article>
    </Suspense>
  );
}

function ComponentTwo() {
  return (
    <div>
      <p>{...}</p>
      <link rel="stylesheet" href="baz" precedence="default" />  {/* 將會被插入在 foo 和 bar 之間 */}
    </div>
  );
}

function App() {
  return (
    <>
      <ComponentOne />
      ...
      <ComponentOne /> {/* 不會在 DOM 中導致樣式表鏈接重複 */}
    </>
  );
}

function MyComponent() {
  return (
    <div>
      <script async={true} src="..." />
      Hello World
    </div>
  );
}

function App() {
  return (
    <html>
      <body>
        <MyComponent />
        ...
        <MyComponent /> {/* 不會導致 DOM 中的腳本重複 */}
      </body>
    </html>
  );
}

import { prefetchDNS, preconnect, preload, preinit } from "react-dom";

function MyComponent() {
  preinit("https://.../path/to/some/script.js", { as: "script" }); // 預先載入並執行此腳本
  preload("https://.../path/to/font.woff", { as: "font" }); // 預載入此字體
  preload("https://.../path/to/stylesheet.css", { as: "style" }); // 預載入此樣式表
  prefetchDNS("https://..."); // 當你可能不會從此主機請求任何內容時使用
  preconnect("https://..."); // 當你將會請求某些東西，但不確定具體請求的資源時使用
}