1. 面试题目 #

假设需要让大模型生成一个React表单组件代码，请设计一个包含上下文约束的Prompt，需要包含数据验证、错误提示等要求。设计一个用户注册表单组件，要求使用React Hook Form进行表单管理和验证。

2. 参考答案 #

2.1 表单字段设计 #

2.1.1 表单字段设计 #

• 用户名：必填，2-10个字符
• 邮箱：必填，有效邮箱格式
• 密码：必填，8-20个字符，包含大小写字母和数字
• 确认密码：必填，必须与密码匹配
• 手机号：可选，有效手机号格式
• 提交按钮

2.1.2 数据验证要求 #

• 实现实时字段验证
• 提供清晰的错误提示信息
• 表单提交时的加载状态
• 成功/失败反馈机制

2.2 技术要求 #

2.2.1 技术栈选择 #

• 使用React Hook Form进行表单管理
• 使用TypeScript编写代码
• 使用Tailwind CSS进行样式设计
• 遵循React最佳实践和设计模式

2.2.2 代码规范 #

• 完整的代码注释
• 组件和类型定义分离
• 统一的错误信息管理
• 合理的文件结构组织

2.2.3 性能优化 #

• 避免不必要的重新渲染
• 合理使用memo和useCallback
• 表单验证防抖处理

2.3 核心考察点 #

2.3.1 AI Prompt设计能力 #

• 如何编写结构化的Prompt
• 如何明确技术栈和功能边界
• 如何设定代码质量和性能要求

2.3.2 React技术深度 #

• React Hook Form的使用和理解
• TypeScript在React中的应用
• 表单验证的最佳实践

2.3.3 用户体验设计 #

• 实时验证的用户体验
• 错误提示的友好性
• 加载状态的合理展示

2.4 扩展问题 #

2.4.1 表单验证最佳实践 #

• 即时反馈：实时验证用户输入
• 清晰提示：错误信息简单明了，指导用户修正
• 优雅降级：即使JavaScript被禁用也能正常工作
• 服务端验证：前端验证提升体验，后端验证保证安全

2.4.2 React Hook Form优势分析 #

• 性能优势：使用非受控组件，减少重新渲染
• 体积优势：更小的打包体积
• 易用性：直观的API，学习成本低
• 灵活性：支持多种验证方案（yup、zod等）
• TypeScript支持：完整的类型定义

2.4.3 代码质量保证 #

• 如何确保生成的代码具有良好的可维护性？
• 在团队开发中如何保证代码的一致性？
• 如何设计可复用的表单验证逻辑？

2.5 评分标准 #

• Prompt设计 (30%)：结构清晰、要求明确、技术栈合理
• 功能实现 (25%)：表单验证完整性、用户体验流畅性
• 代码质量 (25%)：TypeScript使用、代码规范、性能优化
• 技术理解 (20%)：对React Hook Form的理解、最佳实践应用

2.6 相关资源 #

• React Hook Form官方文档：https://react-hook-form.com/
• Tailwind CSS官方文档：https://tailwindcss.com/
• Zod类型验证库：https://github.com/colinhacks/zod

这道面试题既考察了候选人的React技术能力，又测试了其AI工具使用和Prompt编写能力，是一个综合性较强的技术面试题。