引言
当你开始学习前端开发时，会遇到大量专业术语：路由、组件、状态、生命周期、中间件、Hook......这些词听起来很抽象，但其实都有非常直观的含义。
本文将用生活化的比喻来解释这些概念，让你彻底理解它们的本质。
第一部分：路由（Router）
什么是路由？
路由 = URL 地址与页面内容的映射关系
用生活中的例子来理解：
┌─────────────────────────────────────────────────────────┐
│ 路由就像"门牌号" │
├─────────────────────────────────────────────────────────┤
│ │
│ 🏢 一栋大楼（网站） │
│ │
│ 101 室 → 财务部 /home → 首页 │
│ 102 室 → 人事部 /about → 关于我们 │
│ 201 室 → 技术部 /products → 产品列表 │
│ 202 室 → 销售部 /contact → 联系我们 │
│ │
│ 你告诉前台"我要去 201"，前台就带你去技术部 │
│ 你在浏览器输入 /products，路由就显示产品页面 │
│ │
└─────────────────────────────────────────────────────────┘路由的工作原理
用户在浏览器输入：https://shop.com/products/123
路由系统解析：
┌─────────────────────────────────────────┐
│ https://shop.com /products /123 │
│ ───────────────── ───────── ───── │
│ 域名 路径 参数 │
└─────────────────────────────────────────┘
路由匹配：
/products/:id → 匹配成功！
显示 ProductDetail 组件
并把 id=123 传给这个组件代码示例
// React Router 示例
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
{/* 路径 → 显示的组件 */}
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/products" element={<ProductList />} />
<Route path="/products/:id" element={<ProductDetail />} />
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
);
}
// Vue Router 示例
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/products', component: ProductList },
{ path: '/products/:id', component: ProductDetail },
{ path: '/:pathMatch(.*)*', component: NotFound },
];路由参数
┌─────────────────────────────────────────────────────────┐
│ 路由参数类型 │
├─────────────────────────────────────────────────────────┤
│ │
│ 1️⃣ 路径参数（Path Parameters） │
│ /users/:id → /users/123 │
│ /posts/:year/:month → /posts/2025/12 │
│ │
│ 2️⃣ 查询参数（Query Parameters） │
│ /search?keyword=手机&page=2 │
│ │
│ 3️⃣ 哈希/锚点（Hash） │
│ /docs#installation │
│ │
└─────────────────────────────────────────────────────────┘
// 获取路由参数示例（React）
import { useParams, useSearchParams } from 'react-router-dom';
function ProductDetail() {
// 获取路径参数 /products/:id
const { id } = useParams();
// 获取查询参数 ? color=red&size=large
const [searchParams] = useSearchParams();
const color = searchParams.get('color');
const size = searchParams.get('size');
return <div>产品 ID: {id}, 颜色: {color}, 尺寸: {size}</div>;
}第二部分：组件（Component）
什么是组件？
组件 = 可复用的 UI 积木块
┌─────────────────────────────────────────────────────────┐
│ 组件就像"乐高积木" │
├─────────────────────────────────────────────────────────┤
│ │
│ 🧱 一块乐高积木 = 一个组件 │
│ │
│ ┌─────────────────────────────────┐ │
│ │ 页面 │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ Header 组件 │ │ │
│ │ └─────────────────────────┘ │ │
│ │ ┌──────────┐ ┌───────────┐ │ │
│ │ │ Sidebar │ │ Content │ │ │
│ │ │ 组件 │ │ 组件 │ │ │
│ │ │ │ │ ┌───────┐ │ │ │
│ │ │ │ │ │ Card │ │ │ │
│ │ │ │ │ │ 组件 │ │ │ │
│ │ │ │ │ └───────┘ │ │ │
│ │ └──────────┘ └───────────┘ │ │
│ │ ┌─────────────────────────┐ │ │
│ │ │ Footer 组件 │ │ │
│ │ └─────────────────────────┘ │ │
│ └─────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘组件的优势
┌─────────────────────────────────────────────────────────┐
│ │
│ ✅ 可复用：写一次，到处使用 │
│ 一个 Button 组件可以用在整个网站 │
│ │
│ ✅ 可维护：修改一处，全局生效 │
│ 修改 Button 样式，所有按钮都会更新 │
│ │
│ ✅ 可组合：小组件拼成大组件 │
│ Header = Logo + Nav + SearchBar + UserMenu │
│ │
│ ✅ 可测试：独立测试每个组件 │
│ 单独测试 Button，不用启动整个应用 │
│ │
└─────────────────────────────────────────────────────────┘代码示例
// 一个简单的 Button 组件
interface ButtonProps {
text: string;
onClick: () => void;
type?: 'primary' | 'secondary' | 'danger';
disabled?: boolean;
}
function Button({ text, onClick, type = 'primary', disabled = false }: ButtonProps) {
return (
<button
className={`btn btn-${type}`}
onClick={onClick}
disabled={disabled}
>
{text}
</button>
);
}
// 使用这个组件（复用多次）
function App() {
return (
<div>
<Button text="提交" onClick={() => console.log('提交')} type="primary" />
<Button text="取消" onClick={() => console.log('取消')} type="secondary" />
<Button text="删除" onClick={() => console.log('删除')} type="danger" />
</div>
);
}
// 组件嵌套组合
function Card({ title, children }) {
return (
<div className="card">
<h3>{title}</h3>
<div className="card-body">{children}</div>
</div>
);
}
function UserProfile({ user }) {
return (
<Card title="用户信息"> {/* Card 组件 */}
<Avatar src={user.avatar} /> {/* Avatar 组件 */}
<Text>{user.name}</Text> {/* Text 组件 */}
<Button text="关注" onClick={() => follow(user.id)} /> {/* Button 组件 */}
</Card>
);
}第三部分：状态（State）
什么是状态？
状态 = 会变化的数据，变化后界面会自动更新
┌─────────────────────────────────────────────────────────┐
│ 状态就像"变量 + 自动刷新" │
├─────────────────────────────────────────────────────────┤
│ │
│ 🎮 游戏中的例子： │
│ │
│ 生命值：100 → 被攻击 → 生命值：80 → 血条变短 │
│ 金币：500 → 购买道具 → 金币：300 → 显示更新 │
│ 等级：5 → 打怪升级 → 等级：6 → 界面更新 │
│ │
│ 这些"生命值、金币、等级"就是状态 │
│ 状态变化时，界面自动重新渲染 │
│ │
└─────────────────────────────────────────────────────────┘状态 vs 普通变量
// ❌ 普通变量：修改后界面不会更新
let count = 0;
function handleClick() {
count = count + 1; // 值变了
console.log(count); // 控制台显示新值
// 但是！界面上的数字不会变！
}
// ✅ 状态：修改后界面自动更新
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1); // 调用 setCount
// 界面自动重新渲染，显示新的数字！
}代码示例
import { useState } from 'react';
// 计数器示例
function Counter() {
// 声明状态：count 是当前值，setCount 是修改函数
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(count - 1)}>-1</button>
<button onClick={() => setCount(0)}>重置</button>
</div>
);
}
// 表单输入示例
function LoginForm() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = async () => {
setIsLoading(true);
await login(username, password);
setIsLoading(false);
};
return (
<form>
<input
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="用户名"
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target. value)}
placeholder="密码"
/>
<button onClick={handleSubmit} disabled={isLoading}>
{isLoading ? '登录中...' : '登录'}
</button>
</form>
);
}状态的类型
┌─────────────────────────────────────────────────────────┐
│ 状态分类 │
├─────────────────────────────────────────────────────────┤
│ │
│ 1️⃣ 本地状态（Local State） │
│ 只在一个组件内使用 │
│ 例：表单输入、弹窗开关、加载状态 │
│ │
│ 2️⃣ 共享状态（Shared State） │
│ 多个组件共同使用 │
│ 例：用户登录信息、购物车、主题设置 │
│ │
│ 3️⃣ 服务器状态（Server State） │
│ 从后端 API 获取的数据 │
│ 例：用户列表、商品数据、文章内容 │
│ │
│ 4️⃣ URL 状态（URL State） │
│ 存储在 URL 中的状态 │
│ 例：搜索关键词、分页、筛选条件 │
│ │
└─────────────────────────────────────────────────────────┘第四部分：Props（属性）
什么是 Props？
Props = 父组件传递给子组件的数据
┌─────────────────────────────────────────────────────────┐
│ Props 就像"快递包裹" │
├─────────────────────────────────────────────────────────┤
│ │
│ 👨 父组件（发件人） │
│ │ │
│ │ 📦 打包数据（Props） │
│ │ • 商品名称: "iPhone" │
│ │ • 价格: 5999 │
│ │ • 点击事件: handleClick │
│ │ │
│ ▼ │
│ 👶 子组件（收件人） │
│ 拆开包裹，使用数据 │
│ 显示：iPhone - ¥5999 │
│ │
└─────────────────────────────────────────────────────────┘State vs Props 对比
┌──────────────┬───────────────────┬───────────────────┐
│ 特性 │ State │ Props │
├──────────────┼───────────────────┼───────────────────┤
│ 数据来源 │ 组件内部定义 │ 父组件传入 │
│ 谁能修改 │ 组件自己 │ 只能父组件修改 │
│ 是否可变 │ 可变 │ 只读（不可修改） │
│ 用途 │ 管理自身状态 │ 接收外部数据 │
└──────────────┴───────────────────┴───────────────────┘代码示例
// 子组件：接收 Props
interface ProductCardProps {
name: string;
price: number;
image: string;
onBuy: () => void;
}
function ProductCard({ name, price, image, onBuy }: ProductCardProps) {
return (
<div className="product-card">
<img src={image} alt={name} />
<h3>{name}</h3>
<p className="price">¥{price}</p>
<button onClick={onBuy}>立即购买</button>
</div>
);
}
// 父组件：传递 Props
function ProductList() {
const products = [
{ id: 1, name: 'iPhone 15', price: 5999, image: '/iphone.jpg' },
{ id: 2, name: 'MacBook Pro', price: 12999, image: '/macbook.jpg' },
];
const handleBuy = (productId: number) => {
console.log('购买商品:', productId);
};
return (
<div className="product-list">
{products. map(product => (
<ProductCard
key={product. id}
name={product.name} // 传递字符串
price={product.price} // 传递数字
image={product.image} // 传递字符串
onBuy={() => handleBuy(product.id)} // 传递函数
/>
))}
</div>
);
}第五部分：生命周期（Lifecycle）
什么是生命周期？
生命周期 = 组件从创建到销毁经历的各个阶段
┌─────────────────────────────────────────────────────────┐
│ 生命周期就像"人的一生" │
├─────────────────────────────────────────────────────────┤
│ │
│ 👶 出生（Mount/挂载） │
│ 组件被创建，插入到页面中 │
│ → 适合：获取初始数据、设置定时器 │
│ │
│ 🧑 成长（Update/更新） │
│ 组件的 Props 或 State 变化，重新渲染 │
│ → 适合：响应数据变化、更新 DOM │
│ │
│ 💀 死亡（Unmount/卸载） │
│ 组件从页面中移除 │
│ → 适合：清理定时器、取消网络请求 │
│ │
└─────────────────────────────────────────────────────────┘生命周期图解
组件生命周期流程：
┌─────────────┐
│ 创建组件 │
└──────┬──────┘
▼
┌─────────────┐
│ 初始化状态 │
└──────┬──────┘
▼
┌─────────────┐
│ 首次渲染 │
└──────┬──────┘
▼
┌─────────────┐
│ 挂载完成 │ ← componentDidMount / useEffect
└──────┬──────┘
▼
┌─────────────┐ Props/State 变化
│ 运行中 │ ←─────────────────────┐
└──────┬──────┘ │
│ │
▼ │
┌─────────────┐ │
│ 重新渲染 │ ───────────────────────┘
└──────┬──────┘
│
▼ (组件被移除)
┌─────────────┐
│ 卸载清理 │ ← componentWillUnmount / useEffect cleanup
└─────────────┘代码示例（React Hooks）
import { useState, useEffect } from 'react';
function UserProfile({ userId }: { userId: string }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
// useEffect 处理生命周期
useEffect(() => {
// ===== 挂载时执行（相当于 componentDidMount）=====
console. log('组件挂载了！');
// 获取用户数据
fetchUser(userId).then(data => {
setUser(data);
setLoading(false);
});
// 设置定时器
const timer = setInterval(() => {
console.log('定时任务执行中...');
}, 5000);
// ===== 卸载时执行（相当于 componentWillUnmount）=====
return () => {
console.log('组件要卸载了，清理资源！');
clearInterval(timer); // 清除定时器
};
}, []); // 空数组 = 只在挂载和卸载时执行
// 监听 userId 变化
useEffect(() => {
// ===== userId 变化时执行（相当于 componentDidUpdate）=====
console.log('userId 变化了，重新获取数据');
setLoading(true);
fetchUser(userId).then(data => {
setUser(data);
setLoading(false);
});
}, [userId]); // 依赖数组：userId 变化时执行
if (loading) return <div>加载中...</div>;
return <div>{user. name}</div>;
}useEffect 依赖数组详解
// 1. 没有依赖数组：每次渲染都执行
useEffect(() => {
console.log('每次渲染都会执行');
});
// 2. 空依赖数组：只在挂载和卸载时执行
useEffect(() => {
console.log('只在挂载时执行一次');
return () => console.log('卸载时执行');
}, []);
// 3. 有依赖的数组：依赖变化时执行
useEffect(() => {
console.log('userId 或 page 变化时执行');
}, [userId, page]);第六部分：Hook（钩子）
什么是 Hook？
Hook = 让函数组件拥有各种能力的特殊函数
┌─────────────────────────────────────────────────────────┐
│ Hook 就像"超能力插件" │
├─────────────────────────────────────────────────────────┤
│ │
│ 🦸 普通人（函数组件） │
│ │
│ 安装 useState → 获得"记忆能力"（管理状态） │
│ 安装 useEffect → 获得"感知能力"（响应生命周期） │
│ 安装 useContext → 获得"心灵感应"（跨组件通信） │
│ 安装 useRef → 获得"定位能力"（访问 DOM） │
│ 安装 useMemo → 获得"缓存能力"（性能优化） │
│ │
└─────────────────────────────────────────────────────────┘常用 Hook 一览
|---------------|------------|---------------|
| Hook | 用途 | 使用场景 |
| useState | 管理状态 | 表单输入、开关、计数器 |
| useEffect | 副作用处理 | 数据获取、订阅、定时器 |
| useContext | 跨组件传值 | 主题、用户信息、语言 |
| useRef | 引用 DOM/保存值 | 输入框聚焦、保存定时器ID |
| useMemo | 缓存计算结果 | 复杂计算、避免重复渲染 |
| useCallback | 缓存函数 | 传递给子组件的回调函数 |
| useReducer | 复杂状态管理 | 多个相关状态、复杂逻辑 |
代码示例
import { useState, useEffect, useRef, useMemo, useContext } from 'react';
// 1. useState - 状态管理
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
// 2. useEffect - 副作用处理
function DataFetcher({ url }) {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(data => setData(data));
}, [url]);
return <div>{JSON.stringify(data)}</div>;
}
// 3. useRef - 引用 DOM 元素
function TextInput() {
const inputRef = useRef<HTMLInputElement>(null);
const focusInput = () => {
inputRef.current?.focus(); // 让输入框获得焦点
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>聚焦输入框</button>
</div>
);
}
// 4. useMemo - 缓存计算结果
function ExpensiveCalculation({ numbers }) {
// 只有 numbers 变化时才重新计算
const sum = useMemo(() => {
console.log('计算中...');
return numbers.reduce((a, b) => a + b, 0);
}, [numbers]);
return <div>总和：{sum}</div>;
}
// 5. useContext - 跨组件通信
const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext); // 获取主题
return <button className={theme}>按钮</button>;
}Hook 使用规则
┌─────────────────────────────────────────────────────────┐
│ Hook 使用规则 │
├─────────────────────────────────────────────────────────┤
│ │
│ ✅ 只在函数组件或自定义 Hook 中调用 │
│ │
│ ✅ 只在最顶层调用（不要在循环、条件、嵌套函数中） │
│ │
│ ❌ 错误示例： │
│ if (condition) { │
│ const [state, setState] = useState(0); // 错误！ │
│ } │
│ │
│ ✅ 正确示例： │
│ const [state, setState] = useState(0); │
│ if (condition) { │
│ // 使用 state │
│ } │
│ │
└─────────────────────────────────────────────────────────┘第七部分：事件处理（Event Handling）
什么是事件？
事件 = 用户的操作或浏览器的行为
┌─────────────────────────────────────────────────────────┐
│ 常见事件类型 │
├─────────────────────────────────────────────────────────┤
│ │
│ 🖱️ 鼠标事件 │
│ onClick 点击 │
│ onDoubleClick 双击 │
│ onMouseEnter 鼠标移入 │
│ onMouseLeave 鼠标移出 │
│ │
│ ⌨️ 键盘事件 │
│ onKeyDown 按下键盘 │
│ onKeyUp 松开键盘 │
│ onKeyPress 按键（已废弃） │
│ │
│ 📝 表单事件 │
│ onChange 值改变 │
│ onSubmit 表单提交 │
│ onFocus 获得焦点 │
│ onBlur 失去焦点 │
│ │
│ 📜 滚动/触摸事件 │
│ onScroll 滚动 │
│ onTouchStart 触摸开始 │
│ onTouchEnd 触摸结束 │
│ │
└─────────────────────────────────────────────────────────┘代码示例
function EventDemo() {
// 点击事件
const handleClick = (event: React.MouseEvent) => {
console.log('按钮被点击了');
console. log('点击位置:', event.clientX, event.clientY);
};
// 键盘事件
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
console.log('按下了回车键');
}
};
// 表单输入事件
const handleChange = (event: React. ChangeEvent<HTMLInputElement>) => {
console.log('输入的值:', event.target.value);
};
// 表单提交事件
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault(); // 阻止默认提交行为
console. log('表单提交');
};
return (
<div>
<button onClick={handleClick}>点击我</button>
<input
onKeyDown={handleKeyDown}
onChange={handleChange}
placeholder="试试按回车"
/>
<form onSubmit={handleSubmit}>
<button type="submit">提交</button>
</form>
</div>
);
}第八部分：条件渲染与列表渲染
条件渲染
根据条件决定显示什么内容
function UserGreeting({ isLoggedIn, user }) {
// 方式1：if-else
if (isLoggedIn) {
return <h1>欢迎回来，{user.name}！</h1>;
} else {
return <h1>请先登录</h1>;
}
}
function Notification({ type, message }) {
// 方式2：三元表达式
return (
<div className={type === 'error' ? 'alert-error' : 'alert-success'}>
{type === 'error' ? '❌' : '✅'} {message}
</div>
);
}
function Toolbar({ user }) {
// 方式3：逻辑与 &&（常用于"有就显示"）
return (
<div>
<Logo />
{user && <UserMenu user={user} />} {/* user 存在才显示 */}
{user?. isAdmin && <AdminPanel />} {/* 是管理员才显示 */}
</div>
);
}列表渲染
循环显示数组数据
function TodoList() {
const todos = [
{ id: 1, text: '学习 React', done: true },
{ id: 2, text: '写项目', done: false },
{ id: 3, text: '复习笔记', done: false },
];
return (
<ul>
{todos.map(todo => (
// ⚠️ key 是必需的，用于 React 识别每个元素
<li key={todo.id} className={todo.done ? 'completed' : ''}>
{todo.text}
</li>
))}
</ul>
);
}
// 复杂列表：带筛选和排序
function ProductList({ products, sortBy, filterCategory }) {
const displayProducts = products
.filter(p => filterCategory ? p.category === filterCategory : true)
.sort((a, b) => sortBy === 'price' ? a.price - b.price : a.name.localeCompare(b.name));
return (
<div className="grid">
{displayProducts.length === 0 ? (
<p>没有找到商品</p>
) : (
displayProducts.map(product => (
<ProductCard key={product. id} product={product} />
))
)}
</div>
);
}第九部分：其他重要概念
SPA（单页应用）
┌─────────────────────────────────────────────────────────┐
│ 传统网站 vs 单页应用（SPA） │
├─────────────────────────────────────────────────────────┤
│ │
│ 📄 传统多页应用（MPA） │
│ 点击链接 → 浏览器请求新页面 → 整页刷新 → 白屏 │
│ │
│ 📱 单页应用（SPA） │
│ 点击链接 → JS 拦截 → 只更新变化部分 → 无刷新 │
│ │
│ 优点：体验流畅、响应快速 │
│ 缺点：首次加载慢、SEO 较差 │
│ │
│ 代表：React、Vue、Angular 应用 │
│ │
└─────────────────────────────────────────────────────────┘API 调用
// 从后端获取数据
function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// 调用后端 API
fetch('https://api.example.com/users')
.then(response => {
if (!response.ok) throw new Error('请求失败');
return response.json();
})
.then(data => {
setUsers(data);
setLoading(false);
})
.catch(err => {
setError(err. message);
setLoading(false);
});
}, []);
if (loading) return <div>加载中...</div>;
if (error) return <div>错误：{error}</div>;
return (
<ul>
{users.map(user => <li key={user. id}>{user. name}</li>)}
</ul>
);
}状态管理库
┌─────────────────────────────────────────────────────────┐
│ 状态管理解决方案 │
├─────────────────────────────────────────────────────────┤
│ │
│ 当应用变大，组件变多，状态传递变得复杂： │
│ │
│ A │
│ / \ │
│ B C A 的状态要传给 F？ │
│ / \ A → C → E → F 太麻烦了！ │
│ D E │
│ / │
│ F │
│ │
│ 解决方案：全局状态管理 │
│ │
│ • Redux：最流行，生态完善，但样板代码多 │
│ • Zustand：轻量简洁，推荐新手使用 │
│ • Jotai：原子化状态，React 专用 │
│ • Pinia：Vue 官方推荐 │
│ │
└─────────────────────────────────────────────────────────┘第十部分：名词速查表
核心概念
|------|-----------|--------------|
| 名词 | 英文 | 一句话解释 |
| 组件 | Component | 可复用的 UI 积木块 |
| 状态 | State | 组件内部可变的数据 |
| 属性 | Props | 父组件传给子组件的数据 |
| 路由 | Router | URL 与页面的映射关系 |
| 生命周期 | Lifecycle | 组件从创建到销毁的过程 |
| 钩子 | Hook | 让函数组件拥有更多能力 |
| 渲染 | Render | 把数据转换成界面的过程 |
进阶概念
|--------|------------------------|--------------------|
| 名词 | 英文 | 一句话解释 |
| 虚拟 DOM | Virtual DOM | 内存中的 DOM 副本，用于高效更新 |
| 副作用 | Side Effect | 组件渲染之外的操作（API调用等） |
| 受控组件 | Controlled Component | 表单值由 React 状态控制 |
| 非受控组件 | Uncontrolled Component | 表单值由 DOM 自己管理 |
| 高阶组件 | HOC | 接收组件，返回增强后的组件 |
| 上下文 | Context | 跨组件层级传递数据的方式 |
| 懒加载 | Lazy Loading | 需要时才加载代码，加快首屏速度 |
工程化概念
|------|----------------|-----------------|
| 名词 | 英文 | 一句话解释 |
| 打包 | Bundle | 把多个文件合并成少数几个文件 |
| 编译 | Compile | 把新语法转成浏览器能识别的语法 |
| 热更新 | HMR | 修改代码后自动刷新，保留状态 |
| 代码分割 | Code Splitting | 把代码拆分成多个包，按需加载 |
| 树摇 | Tree Shaking | 删除未使用的代码，减小体积 |
总结
概念关系图
┌─────────────────────────────────────────────────────────┐
│ 前端应用架构 │
└─────────────────────────────────────────────────────────┘
┌─────────┐
│ 路由 │
│ Router │
└────┬────┘
│
┌────────────┼────────────┐
▼ ▼ ▼
┌────────┐ ┌────────┐ ┌────────┐
│ 页面A │ │ 页面B │ │ 页面C │
└───┬────┘ └───┬────┘ └───┬────┘
│ │ │
▼ ▼ ▼
┌────────────────────────────────┐
│ 组件树 │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │组件 │ │组件 │ │组件 │ │
│ │State │ │Props │ │Event │ │
│ └──────┘ └──────┘ └──────┘ │
└────────────────────────────────┘
│
▼
┌──────────────┐
│ 全局状态管理 │
│ Redux/Zustand │
└──────────────┘
│
▼
┌──────────────┐
│ 后端 API │
└──────────────┘学习建议
- 先理解组件和状态：这是一切的基础
- 动手写小项目：计数器 → 待办清单 → 简单商城
- 遇到问题再学：不要一开始就学状态管理库
- 看官方文档：React/Vue 官方文档质量很高
希望这篇文章能帮你理清前端开发的核心概念！🚀
最后更新：2025 年 12 月