16-1 账号模块的功能展示和分析

一、功能介绍

1. 表单校验：

   • 使用 Formik 和 yup 管理表单数据和校验规则。
   • 表单包含账号和密码输入框，校验输入是否为空。

2. 自定义输入控件：

   • 封装自定义的输入控件，支持错误提示显示。

3. 登录状态管理：

   • 根据登录状态显示不同的界面：

     • 未登录时显示默认头像和登录按钮。
     • 已登录时显示用户头像、姓名和退出登录按钮。

二、技术选型

1. Formik：

   • 用于管理表单数据和处理表单提交。
   • 与 UI 无关，适用于 Web 和 React Native 应用。

2. Yup：

   • 用于定义校验规则。
   • 支持多种校验场景，易于扩展。

三、功能分析

1. 表单校验：

   • 使用 Formik 和 yup 定义表单结构和校验规则。
   • 在表单提交时，自动校验输入内容是否符合规则。

2. 自定义输入控件：

   • 封装输入控件，支持错误提示显示。
   • 通过 Formik 的 errors 和 touched 属性，动态显示错误信息。

3. 登录状态管理：

   • 使用 Redux 或其他状态管理工具，管理用户的登录状态。
   • 根据状态显示不同的界面组件。