现代 React（Hooks、服务端组件与 Next.js）
定义
现代 React 指当前 React 生态的主流写法：函数组件 + Hooks、React 服务端组件（RSC）、流式渲染，以及 Next.js、Remix 等全栈框架。它取代了旧式的类组件和纯 SPA 模式——组件可以在服务端运行、数据获取与组件同置，TypeScript 是标配。
为什么对 AI 求职重要
绝大多数 AI 公司的用户端产品都用 React + TypeScript 构建，通常基于 Next.js。面试考察 Hooks 熟练度、数据获取模式和性能思维，而不是老式写法。如果你的 React 经验停留在 Hooks（2019）或服务端组件（2023）之前，刷新这块知识是通过 AI 公司全栈面试的必要条件。
核心概念
- Hooks——
useState、useEffect、useMemo、自定义 Hook；Hooks 规则与依赖数组。 - React 服务端组件——在服务端渲染、零客户端 JS 的组件；理解客户端/服务端边界。
- Next.js App Router——文件路由、布局、Server Actions、基于 Suspense 的流式渲染。
- 数据获取——客户端用 TanStack Query / SWR，服务端在 RSC 内直接 fetch。
- 状态管理——优先局部状态，其次 Zustand/Jotai；Redux 只用于存量代码。
- 性能——记忆化、代码分割、React Compiler、Core Web Vitals。
- 流式 AI 界面——渲染 LLM API 的 token 流（如 Vercel AI SDK 模式）。
学习路径
- 不用框架（Vite + React + TypeScript）做一个小应用，重新掌握地道的 Hooks 写法。
- 完成 Next.js App Router 官方教程，弄清每个组件在哪里运行。
- 做一个流式渲染 Anthropic/OpenAI API 回复的 AI 聊天界面——AI 公司求职最经典的作品项目。
- 加入 TanStack Query、乐观更新和错误边界，把它打磨到生产级。
- 用 Lighthouse 测量并优化 Core Web Vitals，面试时能讲清取舍。