Web 开发技能

技术栈

前端框架

• React – 组件化 UI 库
• Vue.js – 渐进式框架
• Next.js – React 全栈框架
• Vite – 现代构建工具

样式

• Tailwind CSS – 实用优先的 CSS 框架
• CSS Modules – 模块化 CSS
• styled-components – CSS-in-JS

状态管理

• Zustand – 轻量级状态管理
• Redux Toolkit – Redux 官方工具集
• React Query – 服务端状态管理

最佳实践

组件设计

1. 单一职责 – 每个组件只做一件事
2. 可复用性 – 提取通用组件
3. Props 接口 – 明确定义 TypeScript 接口
4. 错误边界 – 处理组件错误

性能优化

• 使用 React.memo 避免不必要的重渲染
• 懒加载路由和组件
• 图片优化（WebP、懒加载）
• 代码分割

代码规范

• ESLint + Prettier
• 统一的命名约定
• 组件文件结构一致
• 注释关键逻辑

项目结构

src/
├── components/      # 组件
│   ├── common/     # 通用组件
│   └── features/   # 功能组件
├── hooks/          # 自定义 Hooks
├── utils/          # 工具函数
├── services/       # API 服务
├── store/          # 状态管理
└── types/          # TypeScript 类型

常用命令

# 创建 React 项目
npm create vite@latest my-app -- --template react-ts

# 创建 Next.js 项目
npx create-next-app@latest

# 安装常用依赖
npm install zustand react-query axios

# 开发服务器
npm run dev

# 构建生产版本
npm run build

调试技巧

1. React DevTools – 检查组件树和 Props
2. Chrome DevTools – 性能分析
3. console.log – 基础调试
4. debugger – 断点调试

安全注意事项

• XSS 防护：永远不要使用 dangerouslySetInnerHTML 处理用户输入
• CSRF 防护：使用 CSRF token
• 敏感数据：不要在前端存储敏感信息
• 依赖审计：定期运行 npm audit