react-19

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

No Manual Memoization (REQUIRED)

无需手动记忆化（强制要求）

typescript

// ✅ React Compiler handles optimization automatically
function Component({ items }) {
  const filtered = items.filter(x => x.active);
  const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));

  const handleClick = (id) => {
    console.log(id);
  };

  return <List items={sorted} onClick={handleClick} />;
}

// ❌ NEVER: Manual memoization
const filtered = useMemo(() => items.filter(x => x.active), [items]);
const handleClick = useCallback((id) => console.log(id), []);

typescript

// ✅ React Compiler会自动处理优化
function Component({ items }) {
  const filtered = items.filter(x => x.active);
  const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));

  const handleClick = (id) => {
    console.log(id);
  };

  return <List items={sorted} onClick={handleClick} />;
}

// ❌ 禁止：手动记忆化
const filtered = useMemo(() => items.filter(x => x.active), [items]);
const handleClick = useCallback((id) => console.log(id), []);

Imports (REQUIRED)

导入规则（强制要求）

typescript

// ✅ ALWAYS: Named imports
import { useState, useEffect, useRef } from "react";

// ❌ NEVER
import React from "react";
import * as React from "react";

typescript

// ✅ 必须：命名导入
import { useState, useEffect, useRef } from "react";

// ❌ 禁止
import React from "react";
import * as React from "react";

Server Components First

优先使用服务器组件

typescript

// ✅ Server Component (default) - no directive
export default async function Page() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

// ✅ Client Component - only when needed
"use client";
export function Interactive() {
  const [state, setState] = useState(false);
  return <button onClick={() => setState(!state)}>Toggle</button>;
}

typescript

// ✅ 服务器组件（默认）- 无需指令
export default async function Page() {
  const data = await fetchData();
  return <ClientComponent data={data} />;
}

// ✅ 客户端组件 - 仅在需要时使用
"use client";
export function Interactive() {
  const [state, setState] = useState(false);
  return <button onClick={() => setState(!state)}>切换</button>;
}

When to use "use client"

何时使用"use client"

useState, useEffect, useRef, useContext
Event handlers (onClick, onChange)
Browser APIs (window, localStorage)

useState、useEffect、useRef、useContext
事件处理函数（onClick、onChange）
浏览器API（window、localStorage）

use() Hook

typescript

import { use } from "react";

// Read promises (suspends until resolved)
function Comments({ promise }) {
  const comments = use(promise);
  return comments.map(c => <div key={c.id}>{c.text}</div>);
}

// Conditional context (not possible with useContext!)
function Theme({ showTheme }) {
  if (showTheme) {
    const theme = use(ThemeContext);
    return <div style={{ color: theme.primary }}>Themed</div>;
  }
  return <div>Plain</div>;
}

typescript

import { use } from "react";

// 读取Promise（会挂起直到解析完成）
function Comments({ promise }) {
  const comments = use(promise);
  return comments.map(c => <div key={c.id}>{c.text}</div>);
}

// 条件式上下文（useContext无法实现！）
function Theme({ showTheme }) {
  if (showTheme) {
    const theme = use(ThemeContext);
    return <div style={{ color: theme.primary }}>带主题样式</div>;
  }
  return <div>普通样式</div>;
}

Actions & useActionState

Actions与useActionState

typescript

"use server";
async function submitForm(formData: FormData) {
  await saveToDatabase(formData);
  revalidatePath("/");
}

// With pending state
import { useActionState } from "react";

function Form() {
  const [state, action, isPending] = useActionState(submitForm, null);
  return (
    <form action={action}>
      <button disabled={isPending}>
        {isPending ? "Saving..." : "Save"}
      </button>
    </form>
  );
}

typescript

"use server";
async function submitForm(formData: FormData) {
  await saveToDatabase(formData);
  revalidatePath("/");
}

// 包含等待状态
import { useActionState } from "react";

function Form() {
  const [state, action, isPending] = useActionState(submitForm, null);
  return (
    <form action={action}>
      <button disabled={isPending}>
        {isPending ? "保存中..." : "保存"}
      </button>
    </form>
  );
}

ref as Prop (No forwardRef)

ref作为属性（无需forwardRef）

typescript

// ✅ React 19: ref is just a prop
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// ❌ Old way (unnecessary now)
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);

typescript

// ✅ React 19：ref只是一个属性
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// ❌ 旧方式（现已无需使用）
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />);