知识点回顾

  1. react运行环境的自定义配置

react-app-rewried customize-cra

  • 关闭Eslint
  • 解析Less
  • 主题配置
  1. react-router-config的使用
  2. Form表单
    • 布局配置
    • 表单属性
    • 表单验证
      • required
      • message
      • email
      • phone
    • 表单事件
    • 操作表单数据的方法
  3. Table

react-router-config的使用

  1. 在views中,为分类控制,新增一个容器组件

Cfy/index.js

  1. 调整Layout/index.js

渲染adminRoutes中的第一层路由,并向第一层路由的组件(Cfy)内部props中注入了第二层路由

  1. renderRoutes(adminRoutes)
  1. 在Cfy/index.js中从props中提取第二层路由信息,并执行renderRoutes
  1. renderRoutes(this.props.route.routes)

combinReducer的使用

文档

  1. 在reducer文件夹中,为不同业务需求定义一个单独的reducer

参考reducer文件夹

  1. 在store/index.js中使用combindReducer整合所有reducer

装饰器语法介绍

  1. 使用装饰器语法前
  1. class Login extends Components{
  2. }
  3. export default connect(mapState)(Login)
  1. 使用装饰器
  1. @connect(mapState) //装饰器
  2. export default class Login extends Components{
  3. }
  1. 装饰器语法文档
  1. @testable //调用装饰器,装饰后续的类或者函数
  2. class MyTestableClass {
  3. // ...
  4. }
  5. function testable(target) { //装饰器函数,参数代表被装饰的类或者函数
  6. target.isTestable = true; //为被装饰的类,挂载属性
  7. }
  8. MyTestableClass.isTestable // true

装饰器的配置流程

  1. 配置config-overrides.js

为了让脚手架环境支持装饰器语法

  1. vscode对装饰器语法的识别配置

如果代码能运行,但是vscode提示语法错误,则需要配置

  1. "settings": {
  2. "problems.decorations.enabled": false,
  3. "javascript.implicitProjectConfig.experimentalDecorators": true
  4. },
  1. 在config-override.js中配置,使得react项目内部能够识别装饰器语法
    文档
    关于装饰器语法

    • 安装一个babel的语法库

      1. cnpm i @babel/plugin-proposal-decorators -D
    • 修改配置项

      参考 config-override.js

资源引用路径的别名配置

@ 指向 src @action 指向 src/action

跳转config-overrides.js配置文件

  1. addWebpackAlias({
  2. '@':path.resolve(__dirname,'src'),
  3. '@action':path.resolve(__dirname,'src/action'),
  4. '@api':path.resolve(__dirname,'src/api'),
  5. '@assets':path.resolve(__dirname,'src/assets'),
  6. '@components':path.resolve(__dirname,'src/components'),
  7. '@utils':path.resolve(__dirname,'src/utils')
  8. })