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)}>Toggle</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 }}>Themed</div>;
  }
  return <div>Plain</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 ? "Saving..." : "Save"}
      </button>
    </form>
  );
}

ref as Prop (No forwardRef)

将ref作为Prop（无需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只是一个Prop
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

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

Keywords

关键词

react, react 19, compiler, useMemo, useCallback, server components, use hook