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 调用这些接口。

延伸理解

复习这篇时，不要只记住名词，要把重点放在 组件通信、Hooks、Next.js 路由、布局、Server/Client Component 和 API Route。这类知识如果只停留在定义层面，很容易在面试或项目中答得很散。更好的理解方式是把它放进一个具体场景：谁在调用它，输入从哪里来，失败后谁负责恢复，数据或状态会不会被重复处理。

前端工程的重点是状态边界、组件责任、数据获取位置和用户交互反馈。
Next.js 项目尤其要区分 Server Component、Client Component、route handler 和页面布局责任。
性能优化应先关注渲染范围、资源大小、缓存策略和交互延迟，而不是过早微调代码。

在真实项目中，可以把它当成一个判断框架：先确认输入、约束、失败场景和可观测性，再决定具体工具或写法。如果一个方案看起来很简单，要继续追问它在规模扩大、权限变化、异常恢复和团队协作下是否仍然成立。

实践检查清单

明确这个知识点在系统中的位置：是开发时约束、运行时能力、基础设施能力，还是协作流程。
写出一个最小可运行例子，并补一个失败例子；只会写 happy path 说明理解还不够稳。
记录常见误用：例如边界条件、权限假设、性能假设、同步/异步差异或环境差异。
把概念和项目经历关联起来：如果面试被追问，可以用自己的项目说明为什么这样选。
最后用一句话总结取舍：它牺牲了什么，换来了什么。

自测问题

这个主题解决的核心问题是什么？
如果不用当前方案，还有哪些替代方案？代价是什么？
最容易出错的边界条件在哪里？
如何在代码、测试或监控中验证它真的可靠？

项目化应用场景

可以把这类知识放到一个项目展示页或后台管理页里理解：Server Component 负责读取稳定数据，Client Component 负责交互状态，表单和按钮处理用户动作，API Route 或后端服务处理写入。React 的核心不是组件越拆越多，而是边界清楚：数据从哪里来，状态属于谁，用户操作失败时界面如何反馈，组件是否能复用。

常见误区：

所有组件都写成 client，失去服务端渲染优势。
把远程数据、表单状态和 UI 展开状态混在一起。
没有 loading、empty、error 状态。

目录