跳到主要内容

商品列表与详情页​

技术栈： 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 + react-window + useMemo

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

技能掌握​

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

问题​

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