类型体操（Type Gymnastics）指用 TypeScript 的类型系统做复杂推导，是进阶必学。

条件类型

type IsString<T> = T extends string ? true : false;type A = IsString<"hello">;  // truetype B = IsString<123>;       // false

映射类型

type Readonly<T> = {  readonly [K in keyof T]: T[K];};type Partial<T> = {  [K in keyof T]?: T[K];};

模板字面量类型

type Greeting = `hello ${string}`;const a: Greeting = "hello world";  // ✅// const b: Greeting = "hi";        // ❌// 实用：事件名推导type EventName = "click" | "focus";type Handler = `on${Capitalize<EventName>}`;// "onClick" | "onFocus"

infer 提取类型

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;type Fn = (a: string) => number;type R = ReturnType<Fn>;  // number

掌握类型体操，能写出类型安全、智能提示完善的库代码。

React 编译器（React Compiler）能自动分析组件、插入最优的 memoization，让开发者不再手写 useMemo 和 useCallback。

问题背景

传统 React 中，为了避免不必要的重渲染，开发者要手动优化：

function ProductList({ products, filter }) {  const filtered = useMemo(    () => products.filter(p => p.category === filter),    [products, filter]  );  const handleClick = useCallback((id) => {    console.log(id);  }, []);  return <List items={filtered} onClick={handleClick} />;}

手写依赖数组容易出错，也增加心智负担。

编译器写法

启用编译器后，同样的逻辑直接写，无需手动优化：

function ProductList({ products, filter }) {  const filtered = products.filter(p => p.category === filter);  const handleClick = (id) => console.log(id);  return <List items={filtered} onClick={handleClick} />;}

编译器会在构建时自动分析依赖，插入等价的缓存逻辑，性能不降反升。

启用方式

npm install babel-plugin-react-compiler

// babel.config.jsmodule.exports = {  plugins: [["babel-plugin-react-compiler", {}]],};

React 编译器代表了 React 的重要方向：让开发者专注业务逻辑，性能优化交给工具。

重构是程序员的日常，AI 能大幅加速这个过程。

场景一：Class 转 Hooks

把 React Class 组件迁移到函数组件，AI 能一次性完成：

输入（选中）：

class Timer extends React.Component {  state = { seconds: 0 };  componentDidMount() {    this.interval = setInterval(      () => this.setState(s => ({ seconds: s.seconds + 1 })), 1000    );  }  componentWillUnmount() { clearInterval(this.interval); }  render() { return <div>{this.state.seconds}s</div>; }}

让 AI 转换，得到：

function Timer() {  const [seconds, setSeconds] = useState(0);  useEffect(() => {    const id = setInterval(() => setSeconds(s => s + 1), 1000);    return () => clearInterval(id);  }, []);  return <div>{seconds}s</div>;}

场景二：消除重复代码

选中几段相似代码，问 AI："抽象出公共函数"。

场景三：性能优化

贴一段代码问："哪里可以优化"，AI 会指出重复计算、不必要的重渲染等问题。

注意事项

AI 重构后务必测试，尤其是涉及业务逻辑的部分。AI 理解不了你的业务语境，边界情况需要人工确认。

Tailwind CSS v4.x 系列持续更新，带来了许多提升开发效率的功能。

自定义动画

在 CSS 中直接用 @theme 定义：

@theme {  --animate-slide-up: slide-up 0.3s ease-out;}@keyframes slide-up {  from { transform: translateY(10px); opacity: 0; }  to { transform: translateY(0); opacity: 1; }}

<div class="animate-slide-up">内容</div>

容器查询

Tailwind v4.5 原生支持容器查询：

<div class="@container">  <div class="@max-md:flex-col @min-md:flex-row">    <div class="@min-md:w-1/3">侧边栏</div>    <div class="@min-md:w-2/3">主内容</div>  </div></div>

实用组合

<button class="bg-blue-500 hover:bg-blue-600 active:scale-95 transition-transform               disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-blue-400">  提交</button>

Tailwind 在 2026 年依然是 CSS 框架的首选，v4.5 的容器查询支持让响应式开发更加灵活。

Server Actions 是 React 19 最重要的新特性之一，允许客户端组件直接调用服务端函数，无需手动创建 API 路由。

基础使用

// app/actions.ts"use server";import { db } from "@/lib/db";import { revalidatePath } from "next/cache";export async function createPost(formData: FormData) {  const title = formData.get("title");  const content = formData.get("content");  const post = await db.post.create({ data: { title, content } });  revalidatePath("/posts");  return post;}

在客户端组件中使用：

"use client";import { useTransition } from "react";import { createPost } from "./actions";export function PostForm() {  const [pending, startTransition] = useTransition();  return (    <form action={createPost}>      <input name="title" required />      <textarea name="content" />      <button type="submit" disabled={pending}>发布</button>    </form>  );}

Server Actions 配合 revalidatePath 可以实现 mutations 后自动刷新页面数据，配合 useOptimistic 可以实现乐观更新，无需手动管理 loading 状态。

TypeScript 5.8 在类型系统上做了不少值得关注的改进。

内联类型导入

以前必须分开写 import type 和 import，现在可以写在一起：

import { type User, fetchData, type Config } from "./types";

编译时 type 会被移除，不会产生运行时开销。

const 类型参数

当需要保留字面量类型的精确性时，const 类型参数非常有用：

function tuple<T extends readonly any[]>(items: T): T {  return items;}// 推断为 readonly [1, "hello", true]const result = tuple([1, "hello", true] as const);

枚举增强

枚举现在可以引用其他枚举的值，这在主题系统中特别有用：

enum Color { Red, Green, Blue }enum Theme {  Primary = Color.Blue,  Secondary = Color.Green,}

TypeScript 在 2026 年已经成为前端项目的标配，这些新特性让类型编程更加流畅。

写好 prompt 是 2026 年 AI 时代的核心技能。

结构化 Prompt

一个好的 prompt 应该包含明确的角色、任务、输出格式和约束：

## 角色你是一名资深前端工程师## 任务审查以下代码，找出所有性能问题## 输出格式每条按「问题 → 原因 → 优化方案」的格式输出## 约束- 只关注性能问题- 给出具体的代码示例- 优先级从高到低排列

Few-shot 示例

通过示例来引导模型输出：

const prompt = `将以下用户反馈分类：反馈："登录页面加载太慢了" → 性能反馈："点击按钮没有反应" → Bug反馈："能不能加个导出功能" → 需求反馈："${newFeedback}" → `;

好的 prompt 是 AI 应用成功的一半。花时间设计 prompt 比反复调模型参数更有效。

AI 图像生成已经从新奇玩具变成实用工具。

主流工具对比

工程化集成

import Together from "together-ai";const together = new Together({ apiKey: process.env.TOGETHER_KEY });const response = await together.images.create({  model: "black-forest-labs/FLUX.1-schnell",  prompt: "简约毛玻璃风格的卡片设计，蓝色调",  width: 1024,  height: 768,});

AI 生图在前端开发中常用于生成配图、占位图和设计探索。

2026 年每个前端开发者都在思考这个问题。

AI 擅长的

• 生成模板代码和组件骨架
• 编写单元测试和文档
• CSS 样式调整
• 简单 Bug 修复
• API 调用封装

人类不可替代的

• 系统架构设计和技术选型
• 用户体验决策和交互设计
• 代码审查和关键决策
• 与产品和设计的沟通协作

结论

2027 年的前端开发者不是被 AI 取代，而是掌握 AI 工具的开发者取代了不用的。学会与 AI 协作是生存的基本技能。最好的策略是把 AI 当作一个高效的同事，而不是威胁。

2026 年，调用大模型 API 已经成为后端开发的基本功。

流式响应

const response = await fetch("https://api.deepseek.com/chat/completions", {  method: "POST",  headers: { "Authorization": "Bearer sk-xxx" },  body: JSON.stringify({    model: "deepseek-chat",    messages: [{ role: "user", content: "写一首诗" }],    stream: true,  }),});const reader = response.body.getReader();const decoder = new TextDecoder();while (true) {  const { done, value } = await reader.read();  if (done) break;  process.stdout.write(decoder.decode(value));}

函数调用（Tools）

const response = await fetch("https://api.deepseek.com/v1/chat/completions", {  method: "POST",  headers: { "Authorization": "Bearer sk-xxx" },  body: JSON.stringify({    model: "deepseek-chat",    messages: [{ role: "user", content: "北京今天多少度？" }],    tools: [{      type: "function",      function: {        name: "get_weather",        description: "获取天气信息",        parameters: {          type: "object",          properties: { city: { type: "string" } },          required: ["city"],        },      },    }],  }),});

掌握大模型 API 调用在 2026 年就像当年掌握 REST API 一样重要。

AI Agent 正在从实验性项目走向生产环境。

单 Agent 工作流

async function customerAgent(query: string) {  // 1. 意图识别  const intent = await llm.classify(query, [    "订单查询", "退换货", "产品咨询"  ]);  // 2. 信息检索  const info = intent === "订单查询"    ? await db.orders.findByUser(query)    : await db.products.search(query);  // 3. 生成回复  return llm.generate(query, info);}

多 Agent 协作

// 路由 Agent → 专业 Agent → 汇总 Agentconst specialist = await routerAgent(query);const answer = await specialist.execute(query);const final = await summaryAgent(answer);

实际应用

AI Agent 在客服自动化、代码审查、数据分析等场景已经取得显著效果。关键在于合理的 Agent 分工和清晰的指令定义。

错误监控是前端工程的必修课。

全局错误捕获

window.addEventListener("unhandledrejection", (event) => {  console.error("未处理的 Promise 错误:", event.reason);  fetch("/api/log-error", {    method: "POST",    body: JSON.stringify({      message: event.reason?.message,      stack: event.reason?.stack,      url: window.location.href,      userAgent: navigator.userAgent,    }),  });});

React 错误边界

class ErrorBoundary extends React.Component {  state = { hasError: false, error: null };  static getDerivedStateFromError(error) {    return { hasError: true, error };  }  componentDidCatch(error, info) {    console.error(error, info.componentStack);  }  render() {    if (this.state.hasError) {      return <h1>出错了，请刷新页面</h1>;    }    return this.props.children;  }}

Core Web Vitals 监控

new PerformanceObserver((list) => {  for (const entry of list.getEntries()) {    if (entry.name === "LCP") {      console.log(`LCP: ${entry.startTime}ms`);    }  }}).observe({ type: "largest-contentful-paint", buffered: true });

前端测试不再追求 100% 覆盖率，而是关注 ROI。

测试金字塔 2026

          ╱  E2E (5-10%)  ╲      Playwright         ╱  集成 (20-30%)   ╲    Testing Library        ╱   单元 (60-70%)    ╲   Vitest

Playwright 组件测试

import { test, expect } from "@playwright/experimental-ct-react";import { Counter } from "./Counter";test("点击增加计数", async ({ mount }) => {  const component = await mount(<Counter />);  await component.getByText("增加").click();  await expect(component).toContainText("1");});

2026 年的测试策略强调测试用户行为而非实现细节。组件测试比单元测试更有价值，E2E 测试覆盖关键用户流程。

容器查询是 2026 年响应式设计的新基石。

基础用法

.card-container {  container-type: inline-size;  container-name: card;}@container card (min-width: 400px) {  .card { display: grid; grid-template-columns: 200px 1fr; }}

与媒体查询配合

媒体查询管页面级布局，容器查询管组件级适配：

@media (max-width: 768px) {  .grid { grid-template-columns: 1fr; }}@container (min-width: 400px) {  .card { flex-direction: row; }}

容器查询让组件真正做到"一次编写，到处适配"，是组件化开发的理想方案。

AI 编程助手在 2026 年已经成为开发者标配工具。

Claude Code（终端级）

直接在终端运行，能够理解整个项目的上下文：

claude "找出所有未使用的 CSS 类并删除"claude "将这个组件从 Class 组件改为函数组件，添加 TypeScript 类型"

Claude Code 的优势在于它可以自主阅读代码、运行命令、修改文件，适合重构和代码审查场景。

Cursor（IDE 级）

Cursor 的核心功能包括：

• Tab 补全：不只是补一行，而是预测下一步操作
• Composer：多文件同时编辑
• Agent 模式：自动运行终端命令

选型建议

全栈开发推荐 Cursor，终端脚本和代码审查推荐 Claude Code。两者配合使用效果最佳。

View Transitions API 让页面之间的过渡动画变得简单，而且能在多页应用中实现 SPA 般的流畅体验。

基础用法

// 页面切换时触发过渡动画document.startViewTransition(() => {  updateDOM();});

多页面应用

MPA 中可以使用 Cross-document View Transitions：

@view-transition { navigation: auto; }::view-transition-old(root) { animation: fade-out 0.3s ease; }::view-transition-new(root) { animation: fade-in 0.3s ease; }

View Transitions API 让多页应用也能拥有流畅的页面过渡，是 2026 年值得掌握的新技术。

Biome 是用 Rust 编写的前端工具链，统一了 lint 和 format，目标是取代 ESLint + Prettier。

性能对比

格式化同样的大项目：Biome 只需约 200ms，而 Prettier 需要 3.5 秒，差距接近 20 倍。

配置简单

{  "formatter": {    "indentStyle": "space",    "indentWidth": 2,    "lineWidth": 100  },  "linter": { "rules": { "recommended": true } }}

迁移

npm uninstall eslint prettiernpm install --save-dev @biomejs/biomenpx biome initnpx biome format --write .

Biome 的 Rust 底层让它比传统 JS 工具快 10-20 倍，2026 年越来越多的项目正在迁移。

RAG（检索增强生成）是 2026 年构建企业知识库问答的标准方案。

架构设计

用户问题 → 向量化 → 向量检索 → 相关文档 → LLM 生成 → 最终回答

Python 实现

import chromadbfrom openai import OpenAI# 1. 向量化存储文档collection = chromadb.Client().create_collection("docs")collection.add(    documents=["Halo 是一个开源博客系统"],    ids=["doc1"],)# 2. 检索相关文档results = collection.query(query_texts=["Halo 是什么？"], n_results=3)context = "".join(results["documents"][0])# 3. 生成回答client = OpenAI()response = client.chat.completions.create(    model="gpt-4o-mini",    messages=[{        "role": "user",        "content": f"基于以下资料回答：{context}问题：Halo 是什么？"    }],)

RAG 解决了 LLM 知识固定的问题，是企业 AI 应用的核心模式。

React 19 是近年来最重要的版本更新，带来了多项改变游戏规则的新特性。

Actions（动作）

Actions 是 React 19 最核心的新概念——它让异步状态管理变得前所未有的简单：

"use client";function SubmitButton() {  // useActionState 管理表单提交状态  const [state, action, pending] = useActionState(    async (prev, formData) => {      const name = formData.get("name");      const res = await fetch("/api/users", {        method: "POST",        body: JSON.stringify({ name }),      });      return { success: true, id: (await res.json()).id };    },    { success: false, id: null }  );  return (    <form action={action}>      <input name="name" required disabled={pending} />      <button type="submit" disabled={pending}>        {pending ? "提交中..." : "提交"}      </button>      {state.success && <p>创建成功 ID: {state.id}</p>}    </form>  );}

use Hook

可以直接在组件中读取 Promise 和 Context：

function Comments({ promise }) {  const comments = use(promise); // 直接 resolve Promise  return comments.map(c => <p key={c.id}>{c.text}</p>);}

ref 作为 prop

不再需要 forwardRef：

function Input({ ref, ...props }) {  return <input ref={ref} {...props} />;}

React 19 标志着 React 进入了新的时代——服务端组件成熟、Actions 简化开发、API 更加直观。

Core Web Vitals 的指标在 2026 年有了新的门槛，以下是当前最佳实践。

LCP（最大内容绘制）

2026 年最佳做法：

<!-- 关键资源预加载 --><link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin><link rel="preload" href="/hero.webp" as="image"><!-- 使用 fetchpriority 提示优先级 --><img src="hero.webp" fetchpriority="high" alt="">

INP（交互到下次绘制）

INP 取代了 FID，衡量的是页面交互的响应速度：

// 使用 requestIdleCallback 延迟非关键任务requestIdleCallback(() => {  loadAnalytics();  initChatWidget();}, { timeout: 2000 });// 避免长任务function processData(data) {  const chunkSize = 50;  for (let i = 0; i < data.length; i += chunkSize) {    setTimeout(() => {      processChunk(data.slice(i, i + chunkSize));    }, 0);  }}

图片优化

<!-- AVIF 格式 + 响应式 --><picture>  <source srcset="image.avif" type="image/avif">  <source srcset="image.webp" type="image/webp">  <img src="image.jpg" loading="lazy" decoding="async" alt=""></picture>

性能预算

每个项目都应该设性能预算：

2026 年性能优化不再是"加分项"，而是用户体验的基础要求。