框架和库:React、Vue 和 Next.js

库和框架有什么区别

写程序时,有些功能别人已经写好了,你拿来用,不用从零开始。这就是「库」和「框架」的价值。但两者用法不同:

**库(Library)**:你主动调用它。库提供工具,你在需要的地方引入并调用。像去工具箱拿扳手,什么时候拿、怎么用,你说了算。

// 引入库,主动调用
import { shuffle } from "lodash";
const arr = shuffle([1, 2, 3, 4]); // 你决定何时调用

**框架(Framework)**:它调用你。框架定义了程序的结构和流程,你在框架规定的位置填代码。像搭脚手架,你往指定位置放砖,但整体结构由脚手架决定。

// Next.js 框架:你定义页面组件,框架决定怎么加载和渲染
// app/page.tsx
export default function Page() {
  return <h1>首页</h1>;
}

这就是「控制反转」(Inversion of Control):库你控制,框架它控制。

前端三大框架

现代前端开发,框架几乎是标配。最流行的三个:

React

Facebook(现 Meta)开发。本身是个库,只管 UI 渲染,但围绕它形成了完整的生态(路由、状态管理、服务端渲染),常被当作框架用。

特点:
- **组件化**:UI 拆成独立组件,可复用。
- **声明式**:描述「UI 应该长什么样」,不描述「怎么一步步改 DOM」。
- **虚拟 DOM**:在内存里算差异,最小化真实 DOM 操作。
- **生态最大**:配套工具、教程、第三方库最多。

本站用的就是 React。

Vue

尤雨溪开发。语法更接近传统 HTML,上手简单。

特点:
- **模板语法**:HTML 里直接写逻辑,直观。
- **双向绑定**:数据和 UI 自动同步。
- **文档优秀**:中文文档齐全,适合国人入门。

Angular

Google 开发。最「重」的框架,自带一切(路由、表单、HTTP、状态管理)。

特点:
- **大而全**:一个框架搞定所有事。
- **TypeScript 必需**:强制用 TS。
- **学习曲线陡**:概念多,适合大型企业项目。

Next.js:React 的全栈框架

React 本身只管 UI,要做完整网站还需要路由、数据获取、服务端渲染等。Next.js 把这些都集成了:

• **文件路由**:`app/page.tsx` 自动成为首页,`app/articles/[id]/page.tsx` 自动成为文章详情页。
• **服务端渲染**:首屏在服务器生成 HTML,加载快、利于 SEO。
• **API 路由**:同一个项目里写后端接口。
• **全栈**:前端、后端、部署一体化。

本站就是 Next.js 项目。你看到的 `app/` 目录、Server Components、Server Actions,都是 Next.js 的特性。

什么时候用框架

• **小工具、单页面**:用库就够,不必上框架。
• **完整网站、多页面**:用框架,省去重复搭基础设施。
• **团队协作**:框架提供统一结构,新人好上手。

理解库和框架,你就能看懂 AI 提的「加个路由」「用 Server Action」是什么层面的建议。