跳到主要内容

项目梳理

梳理现有项目的业务架构（如电商/后台管理系统）、技术选型（为何选 React 而非 Vue？）、模块划分​

用「架构图」展示项目分层（视图层/逻辑层/服务层），标注关键技术点（如微前端/低代码）​

todoList 进阶版​

技术栈：React + Typescript + Zustand

  • 待办事项/删除/修改/筛选（全部、已完成、未完成）
  • 本地储存（localStorage 持久化）
  • TS 类型定义 （Todo 接口、 Store 类型）

技能掌握​

  • 熟练用 TS 写 React 组件
  • 掌握 Zustand 状态管理
  • 理解本地储存方案

问题​

  • 项目为什么使用 TypeScript ？解决了什么问题
  • 如何处理 localStorage 中的数据过期问题

商品列表与详情页​

技术栈： React + React Router + Axios

  • 商品列表（分页、筛选、排序）
  • 商品详情页 （动态路由 /goods/:id）
  • 接口请求的封装 (Axios 拦截器)

技能​

  • 熟练使用 React Router 动态路由
  • 掌握接口请求封装的规范
  • 理解分页逻辑并实现

问题​

  • 如何封装一个可复用的 Axios 请求函数？需要考虑哪些点？
  • 商品列表的 “分页” 如何实现？如果是 “无限滚动” 呢？

用户登录与权限控制​

技术栈：React + Redux Toolkit + React Router

  • 登录表单（用户名 / 密码验证、loading 状态）
  • Token 管理（登录后存储、请求时携带、过期刷新）
  • 权限控制（基于角色显示 / 隐藏菜单、路由拦截）

技能掌握​

  • 掌握 Redux Toolkit 简化 Redux 代码
  • 立即前端权限控制方案
  • 熟练处理 Token 相关的逻辑

问题​

  • 前端如何实现 “Token 过期自动刷新”？
  • 基于角色的权限控制（RBAC）在前端如何落地？

表单组件​

React + Formik / React Hook Form

  • 复杂表单（多字段、嵌套字段、动态添加字段）
  • 表单验证（实时验证、提交前验证、自定义校验规则）
  • 表单提交（loading 状态、错误提示）

技能掌握​

  • 掌握主流表单库的使用
  • 理解复杂表单的状态管理
  • 熟练处理表单验证的逻辑

相关问题​

  • React Hook Form 相比 Formik 的优势是什么
  • 如果处理 “动态表单” （如动态添加输入框）的验证和状态

UI 组件封装​

技术栈：React + CSS Module/Styled Components

  • Button 组件
    • 多种类型
    • 尺寸
    • 禁用状态
    • 点击事件
  • Modal 组件
    • 显示/隐藏
    • 遮盖层
    • 自定义内容
    • 键盘关闭

技能掌握​

  • 掌握 React 组件封装的规范
  • 理解 CSS 模块化方案
  • 熟练处理组件的 props 设计

相关问题​

  • 如何设计一个高可用的 React 组件？需要考虑哪些点
  • CSS Modules 和 Styled Components 的区别是什么？ 各自的使用场景

状态管理实战​

技术栈：React + MobX + TypeScript

  • 购物车的添加/删除/修改数量
  • 选中状态管理（全选/反选）
  • 价格计算（选中商品的总价、优惠）

技能掌握​

  • 熟练的使用 MobX 处理复杂状态
  • 理解状态设计的合理性
  • 掌握 TS 在状态管理中的应用

问题​

  • 购物车的 ”本地储存“ 和 “接口同步” 如何设计
  • 多端（PC/移动端）购物车状态怎么保持一致

性能优化（长列表）​

技术栈： React + react-window + useMemo

  • 10 万条数据长列表渲染
  • 列表筛选、排序（优化计算性能）
  • 滚动加载（触底加载更多）

技能掌握​

  • 理解长列表优化方案
  • 理解 useMemo 对计算性能的优化
  • 熟练处理滚动事件

问题​

  • 长列表的 "筛选排序" 如何避免卡断
  • 除了虚拟列表，还有哪些长列表的渲染方案