Back to Details

react

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React

React

React is the standard library for building user interfaces. React 19 (2025) introduces a new era with the React Compiler, Server Components, and Actions.
React是构建用户界面的标准库。React 19（2025年）凭借React Compiler、Server Components和Actions开启了新时代。

When to Use

适用场景

  • Single Page Apps (SPA): Rich, interactive dashboards.
  • Complex UI: Applications with many moving parts and state.
  • Ecosystem: When you need the largest library of 3rd party components.
  • 单页应用（SPA）：丰富的交互式仪表盘。
  • 复杂UI：包含大量动态元素和状态的应用。
  • 生态系统：当你需要使用数量最多的第三方组件库时。

Quick Start (React 19)

React 19快速开始

tsx
import { use, Suspense } from "react";

// New: 'use' hook for promises
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map((c) => <p key={c.id}>{c.text}</p>);
}

export default function Page({ id }) {
  const commentsPromise = fetchComments(id);

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}
tsx
import { use, Suspense } from "react";

// 新特性：用于处理Promise的'use' hook
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map((c) => <p key={c.id}>{c.text}</p>);
}

export default function Page({ id }) {
  const commentsPromise = fetchComments(id);

  return (
    <Suspense fallback={<p>加载中...</p>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

Core Concepts

核心概念

React Compiler

React Compiler

React 19 introduces an auto-memoizing compiler. You no longer need 
useMemo
or 
useCallback
manually in 99% of cases. The compiler treats code as "memoized by default".
React 19引入了自动记忆化编译器。在99%的场景下，你不再需要手动编写
useMemo
或
useCallback
。编译器默认将代码视为“已记忆化”。

Server Components (RSC)

Server Components（RSC，服务端组件）

Components that run only on the server. They don't send JS to the client.
  • 'use server'
    : Marks a function as a Server Action (callable from client).
  • 'use client'
    : Marks a component as interactive (hydrated on client).
仅在服务端运行的组件。它们不会向客户端发送JS代码。
  • 'use server'
    ：将函数标记为Server Action（可从客户端调用）。
  • 'use client'
    ：将组件标记为交互式组件（在客户端进行 hydration）。

Actions and 
useActionState

Actions与
useActionState

Native support for async form submission.
tsx
function Form() {
  const [error, submitAction, isPending] = useActionState(
    async (prev, formData) => {
      const error = await updateProfile(formData);
      if (error) return error;
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input name="name" />
      <button disabled={isPending}>Save</button>
      {error && <p>{error}</p>}
    </form>
  );
}
原生支持异步表单提交。
tsx
function Form() {
  const [error, submitAction, isPending] = useActionState(
    async (prev, formData) => {
      const error = await updateProfile(formData);
      if (error) return error;
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input name="name" />
      <button disabled={isPending}>保存</button>
      {error && <p>{error}</p>}
    </form>
  );
}

Best Practices (2025)

2025年最佳实践

Do:
  • Trust the Compiler: Stop writing 
    useMemo
    /
    useCallback
    unless you are building a library or strictly optimizing.
  • Use Server Actions: Replace manual 
    fetch('/api/...')
    with robust Server Actions for data mutations.
  • Use 
    ref
    as a prop    : In React 19, 
    ref
    is a plain prop. No more 
    forwardRef
    .
Don't:
  • Don't overuse 
    useEffect
    : Effects are for synchronization with external systems, not for data fetching or derived state.
  • Don't spread props blindly: Pass explicit props to make components easier to debug.
建议：
  • 信任编译器：除非你正在构建库或需要严格优化，否则停止编写
    useMemo
    /
    useCallback
    。
  • 使用Server Actions：用健壮的Server Actions替代手动的
    fetch('/api/...')
    来处理数据变更。
  • 将ref作为属性传递：在React 19中，ref是普通属性，不再需要
    forwardRef
    。
避免：
  • 过度使用useEffect：Effect用于与外部系统同步，而非数据获取或派生状态。
  • 盲目展开属性：传递明确的属性可让组件更易于调试。

References

参考资料