React 与 Next.js 复习：组件通信、Hooks、路由与服务端组件

React 负责构建 UI，Next.js 在 React 之上提供路由、布局、服务端渲染和后端接口能力。

组件通信

父组件向子组件传递数据通常通过 props。

function Child({ name }: { name: string }) {
  return <p>{name}</p>;
}

子组件向父组件通信通常通过回调函数。

function Child({ onChange }: { onChange: (value: string) => void }) {
  return <button onClick={() => onChange("next")}>Update</button>;
}

跨层级状态可以使用 Context，也可以用状态管理库。

常用 Hooks

useState 管理组件状态。

const [count, setCount] = useState(0);

useEffect 处理副作用，例如请求数据、订阅事件。

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

useMemo 缓存计算结果，useCallback 缓存函数引用，useRef 保存 DOM 或跨渲染变量。

Next.js 路由与布局

App Router 中，文件夹决定路由。

app/
  blog/
    page.tsx
  blog/[slug]/
    page.tsx

layout.tsx 用来定义共享布局。

Client 与 Server Component

默认是 Server Component。需要浏览器状态、事件、DOM API 时才写 "use client"。

"use client";
 
export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

后端接口

Next.js 可以通过 Route Handler 写接口。

export async function GET() {
  return Response.json({ ok: true });
}

前端可以使用 fetch 调用这些接口。

目录