react项目经验总结

项目工程化

• 目的：提高开发效率，降低维护成本
• 项目架构设计：项目主页，登陆页面，通用页面，三个是平级关系，项目主页左侧是菜单，右侧动态渲染数据需要周密设计，项目结构定义不好，会加大开发成本
• 目录结构设计：
  • 提取公共配置放到config，置于为外层，菜单，字典
  • api调用封装，api目录，mock封装，component组件封装，styles
• 制定项目开发规范，eslint规范
• 模块化，组件化，模块化是更加细小的颗粒度，组件化是更粗一点，表格是一个组件，表格中的分页是模块
• 前后端接口规范，前端要做错误拦截，loading处理，公共机制
• 性能优化，自动化部署（压缩，合并，打包）流水化处理
• 项目的公共机制部分： 架构设计，目录定义，路由封装，axios封装，错误拦截，loading封装， 表单封装，表格封装，分页封装，header/footer封装,菜单封装，api封装， 公共机制，公共样式，mock封装，noData封装
• 业务菜单，右面的标准页面一般包括查询表单，下面表格，开发时就可以只关心核心数据了
• 表单封装，下拉框，时间框，文本框，checkbox框，按钮等等常用组件框，提取公共部分，只需关注核心不同点，就可以满足大部分的业务
• 表单的封装，一块是纯粹的组件，还有一块是固定的业务组件，封装好以后，需要传递一个结构化的数据formList,一个handleFilter函数，接收baseForm传出来的数据，再引用一下baseForm即可，赋值，初始化值，查询，重置都封装好了
• 表单查询的结果进行封装，requestList专门对请求列表使用
• axios统一的请求拦截，不会处理业务代码，对状态值进行拦截判断，在这里可以对loading做统一的处理

项目架构分析

• 无服务端，利用mockServer实现前端json交互，只需关注前端开发即可
• 项目的核心框架库： React16, Router4.0, Redux
• 项目的中间件/插件： Axios, Map, Echarts, AntD

通用型强，可扩展性高的后台管理系统

• react全家桶

  • React基础知识
  • React生命周期
  • React SPA页面语法讲解
  • React-Router4.0的基础知识
  • 详细介绍路由匹配
  • 使用hashHistory
  • 在项目中运用动态路由
  • Redux 基础知识
  • Redux 框架集成应用

• AntD UI组件

  • 表格列头单选/复选功能封装
  • AntD栅格/按钮/表单讲解
  • 基于AntD弹框组件封装
  • 基于AntD表格组件的封装
  • toast组件
  • notice组件
  • 轮播组件
  • 选项卡组件

• 项目公共机制

  • axios封装/表格封装
  • 公共组件Loading封装/分页封装
  • 错误拦截/菜单封装
  • 路由处理
  • 日期/金额/手机号格式化
  • 权限封装/表单封装
  • Mock集成/JSONP封装
  • 天气调用

• 可复用功能

  • 后台系统整体架构设计
  • 请求插件封装设计
  • 登录页面总体布局和登录表单设计
  • 首页卡片实现
  • 基于Echart实现常用图表功能
  • 基于百度Map SDK实现地图可视化常用功能
  • 介绍图表组件的按需加载
  • 车辆订单基础查询功能实现
  • 用户列表功能实现
  • 车辆列表基础功能实现
  • 菜单渲染/权限控制
  • 角色列表/创建角色/删除角色功能实现