AntD Pro 项目实战经验

Introduce

• AntD Pro 是ReactJs的页面框架。用于快速搭建前端。
• 其中包含的主要技术有：ReactJs，AntD, Umi
• 官网： https://pro.ant.design/zh-CN/
  

Begining

查看2022年的React介绍： https://juejin.cn/post/7085542534943883301
React教程视频： https://www.bilibili.com/video/BV1wy4y1D7JT

Deploying

• React 教程视频看完差不多一半，直接跳到P94跟着视频搭建一个AntD脚手架
• 然后自己去AntD Pro官网，看文档自己搭建一个脚手架
• 刚开始学不要贪多，去除很多不需要的插件目录，减少心智负担，提高学习效率

Summary

• Node.js. 前端包插件管理。packages.json包命令配置
• Yarn 插件，Node-npm指令的助手。运行项目的相关指令可用yarn 代替 npm
• 脚手架搭建好，第一步是用yarn指令安装好依赖包。从packages.json读取
• AntD pro先去除国际化，复杂功能不需要。 删除其他测试插件，删除Mock插件。
• 自定义页面，app.tsx 入口；route.ts 配置路由传入到default.ts配置文件。src/pages存放页面。react-route会根据页面路径自动匹配路由url
• default.ts文件配置 history: {type: 'hash'}。防止项目部署到IIS后，有些变量页面无法找到。如xx.com/pr/details/1, IIS无法匹配叫1的文件。

Difficults

• 数据结构管理：异步api需要在react-effiect中运行并存储在react-useStatus中，在页面结束时会重新渲染页面。巧用AntD-ProComponents的request获取数据。
  • 关于详情页数据展示与提交建议使用ProForm包住。对数据有更好的把控性。
  • 如果EditableProTable有个Tatal列，实时更具其他两个字段值计算总价钱。容易造成“渲染难题”。经常容易造成渲染死循环，渲染输入框失去焦点。
• 页面间数据共享问题：利用js-cookie与umi-InitialState存储登录信息。
  • 页面跳转利用umi-history & umi-Link。详情页query参数可利用路由path: /PR/detail/:docEntry，然后可/PR/detail/1进行访问
  • 页面间其他数据共享问题。如何将List与detail页面的某些值绑定在一起
    • 如api传参共享，目前使用的是ts的class+react.useStatus。
    • 如组件之间数据，使用umi-dva & umi-modal进行参数共享。只限组件内(react-FC)使用