前端/移动开发面试题更新 2026-08-05

请说明如何设计一个多步骤的表单向导组件,实现步骤间切换且能够保留用户已填写的输入状态。

前端/移动开发问题拆解技术原理方案权衡

考察说明

考查组件状态管理与表单数据缓存能力。

回答思路

  1. 【回答框架 1】定义:表单向导组件将长表单拆分为多步,每步独立验证后进入下一步,核心是步骤索引与表单数据的统一管理。
  2. 【回答框架 2】状态管理:在父组件统一保存当前步骤与表单数据,子组件只负责单步渲染,通过 props 或 context 传递,保证状态单一来源。
  3. 【回答框架 3】状态持久化:切换步骤时数据保存在内存对象中,涉及刷新可用 localStorage 或 sessionStorage,并给出恢复逻辑。
  4. 【回答框架 4】实现要点:记录步骤完成状态,支持返回修改,优先使用表单库或双向绑定简化数据收集。
  5. 【关键点 1】父组件持有步骤索引和表单数据,作为单一数据源。
  6. 【关键点 2】步骤切换时保留数据,通常使用对象存储各步骤字段。
  7. 【关键点 3】涉及刷新用 localStorage 持久化,并提供恢复机制。
  8. 【易错点 1】直接清空表单数据导致返回时丢失已填内容。
  9. 【易错点 2】步骤顺序固定,缺乏引导或校验导致流程混乱。