背景

• 备案小程序工单较多，字段也多，输入不方便，体验不好
• pc端备案不具备新建备案功能
• 开发pc端备案功能

技术选型

• 技术栈：React+hooks++redux+Typescript
• 代码规范：husky+eslint+prettier

开发模块

1. 组件开发 共开发可复用组件15个，如域名、地址、证件类型、证件号码、网站名称、主体负责人、网站负责人等，分别被应用于验证页表单、主体表单、网站表单

• 组件开发的思路
  • 父级属性参数（表单状态）
  • 父级回调参数
  • 子级定义参数类型
  • 处理onChange, onFocus事件
  • 使用hooks进行一些公用处理

2. 路由处理

• react-router-dom路由管理
• useHistory得到history

3. 状态管理

• 使用redux进行状态管理
• 使用combineReducers进行隔离reducers

4. 表单状态管理

• 在父组件进行统一管理， 各表单项onBlur触发状态变更， 由父组件进行数据变化再传入子组件

5. 函数式编程

• 组件及页面采用hooks式写法，摒弃class生命周期写法

6. 存在问题

• 定时器、resize、防抖等处理上会有一些处理
• useEffect依赖项要依赖相应值

成果

1. 组件功能解耦,复用性高， 高内聚低耦合
2. 使用了hook的写法，页面精简易读

• useState
• useEffect
• useSelector
• useDispatch
• useCallback

3. 规则引擎
4. 小程序和pc端进行数据联动

• pc端展示小程序二维码
• 微信扫二维码进入小程序，并进行数据生成
• pc端监听数据结果并展示处理相应结果

项目困难

1. 项目推动的问题，需有人整体把握问题、协调问题

备案PC端

该项目是一款帮助腾讯云客户完成网站备案的从0到1的PC端项目，主要模块有验证页，主体页，网站页，上传页，小程序PC交互模块，审核页，结果页。 技术栈：React+hooks+redux+Typescript 代码规范：husky+eslint+prettier 职责：

1. 架构设计：在tea框架的基础上，架构设计了前端模块结构，如页面路由、公共组件、页面、hooks模块、常量、公共方法等，约定了代码规范及eslint检查，完善了typescript模块的typings定义
2. 公共组件设计开发：共开发可复用组件15个，如域名、地址、证件类型、证件号码、网站名称、主体负责人、网站负责人等，分别被应用于验证页表单、主体表单、网站表单， 组件开发思路：父级属性参数、回调参数、子级定义参数类型处理onChange、onFocus事件、使用hooks进行一些公用处理
3. hooks：组件及页面均采用hooks写法， useState组件state状态管理, useEffect代替生命周期进行事件处理，useCallback缓存函数触发，自定义hooks存储状态，useSelector，useDispatch 分别获取redux数据，提交更改state函数等
4. 状态管理：使用tea组件表单，在父组件进行统一管理， 各表单项onBlur触发状态变更， 由父组件进行数据变化再传入子组件；redux状态使用combineReducers集合reducer模块
5. 规则引擎：设计构建通用规则，包含：规则配置、引入、读取、关联展示（订单字段匹配） 项目困难及成果： 在多部门协作、人员办公分散、职责不明确、相关人员不熟悉的情况下， 依靠自身的经验、责任心努力推动相关上线工作，完成了从0到1的验收发布，按迭代需求计划完成项目的开发上线。截至目前已完成3000+备案订单成功提交。