# 1 TTK框架现有两个工程
## 1.1 原ttk json工程
存在问题：
* json写法效率或习惯问题？
* 模块、页面配置项较多
* 编译构建配置文件多、速度慢

## 1.2 新React hooks工程
采用react 最新hooks写法，但不支持旧项目

# 2 @ttk/react新功能及优化

## 2.1 兼容json和hooks
* 新项目直接clone，使用hook写法
* 已有hook项目[升级说明](./help/hooks升级说明.md)
* 已有json项目[升级说明](./help/json升级说明.md)

## 2.2 UI库@ttk/component
    antd升级3.26，增加多个新组件，原组件增加大量的新特性，极大提升业务开发效率；分离业务组件，简化样式文件

### 增加多个新组件

通用
* Typography排版

导航
* PageHeader页头
* Breadcrumb面包屑

数据录入
* Mentions提及

数据展示
* Comment评论
* Descriptions描述列表
* Empty空状态
* Statistic统计数值

反馈
* Skeleton骨架屏
* Result结果

* ConfigProvider全局化配置

### 原组件增加大量的新特性

* 例如Icon图标的图标主题风格。可选实心、描线、双色等主题风格

### 分离业务组件，简化样式文件

以下业务相关组件分离，当前版本在@ttk/component/dz下，后续版本废弃删除
* MoneyCellHeader
* MoneyCell
* QuanAndForeCurrency
* SubjectDisplay
* AccountDisplay
* TableSettingCard
* TableOperate
* TableOperate2
* PrintOption
* PrintOption4
* PrintOption3
* FormDecorator
* GridDecorator
* VirtualTable
* VirtualTable2

## 2.3 统一打包方案fx-webpack

### 统一配置，可以编译React、Vue
fx.webpack.config.js
```
module.exports = {
    fxVue: false, // 是否使用Vue
    fxReact: true, // 是否使用React
}
```

### 基于webpack5使用持久化缓存、内容哈希
    不仅仅是dev模式下的热更新，重新npm start或npm run build均可读取文件缓存，大幅提速

### 模块联邦，可依赖远程模块
    加载顺序为：ttk_entry 异步----> ttk_host 异步----> ttk_json_apps/ttk_hook_apps
|  联邦模块 | 模块类型 | 入口 | 说明 |
|  ------- | ------ | --- | --- |
| ttk_entry  | 本地 | src/index.js | 启动模块，开始显示loading，异步加载host模块后显示返回内容 |
| ttk_host  | 本地/远程 | src/host.js | 异步加载json和hook模块后初始化，返回显示内容，可发布为远程模块供不同项目使用（包括react等依赖） |
| ttk_hook_apps  | 本地 | src/apps/index.js | hook写法模块，扫描src/apps目录内的index.js文件加载业务app |
| ttk_json_apps  | 本地 | src/jsonApps/index.js | json写法模块，扫描src/jsonApps目录内的index.js文件加载业务app |

## 2.4 简化模块配置、打包配置

## 统一开发、生产模式的webpack配置
|  配置文件 | 配置说明 |
|  ------  | ------ |
| fx.webpack.config.js | webpack常用配置、自定义配置，默认配置即可 |
| config/devServer.js | 开发模式服务代理devServer |
| config/moduleFederation.js | 联邦模块配置，默认配置即可，一般不修改 |

## 2.5 取消app模块概念和相关配置

### app模块无需配置、无需使用脚手架
    不区分模块，在src/jsonApp、src/apps直接创建目录并新增app即可，无需配置。框架将自动搜索src/jsonApp、src/apps目录内index.js文件并引入
### 已有项目app模块配置删除脚本
    执行npm run delModulesConfig可删除(src/jsonApps目录下)以下配置文件
* app模块下theme目录关于主题样式文件的引用配置
* app模块下index.js关于app入口文件的引用配置
* app模块index.less关于app样式文件的引用配置

### 原按模块加载app的需求，通过修改自动搜索的正则表达式实现
    src/jsonApps/index.js
```
// 搜索加载所有app
const files = require.context('./', true, /\.\/.+\/index\.js$/)
// 搜索加载指定目录（模块）下app, 如搜索edf和gl目录所有app
// const files = require.context('./', true, /\.\/(edf|gl)\/.+\/index\.js$/)
```

# 3. @ttk/react目录结构
## 3.1 项目目录

|  目录/文件   | 说明 |
|  ----  | ----  |
| config  | 开发模式服务代理配置，联邦模块配置 |
| help  | 框架相关说明文档，包括json、hook工程升级说明 |
| public  | 单页应用index.html模板所在项目 |
| script  | 脚本，例如：delModulesConfig为json工程升级时自动删除无用app模块配置文件的脚本 |
| src  | 源码 |
| static  | 静态资源目录，打包时拷贝至./dist/static |
| .babelrc | babel配置文件，一般不需要修改 |
| .eslintignore | eslint配置文件，配置忽略校验的文件或目录 |
| .eslintrc.json | eslint配置文件，配置校验规则 |
| .gitignore | git配置文件，配置忽略上传的文件或目录 |
| .npmrc | npm配置文件，配置npm仓库 |
| fx.webpack.config.js | fx-webpack配置文件，统一dev/prod配置，具体见文件内注释说明 |
| package.json | npm配置文件，配置依赖包等 |

## 3.2 src目录
|  目录/文件   | 说明 |
|  ----  | ----  |
| apps  | hook写法的app，业务开发主要目录 |
| assets  | 图片、less、css等资源 |
| components  | 自定义组件 |
| constant  | 全局常量 |
| jsonApps  | json写法的app，业务开发主要目录 |
| mock  | mock配置文件 |
| utils  | 自定义工具类 |
| index.js  | 项目入口文件，import("./bootstrap"), 不修改 |
| bootstraps.js  | 加载页面，显示loading，异步加载ttk_host模块（可使用远程模块）后显示host模块，可修改loading组件或引入公共样式 |
| host.js  | 异步加载ttk_json_apps、ttk_hook_apps业务模块，可发布为远程模块，一般不修改 |
| polyfill.js  | 开头polyfill配置，主要为react-app-polyfill |

# 4 @ttk/react主要依赖及修改说明
## 4.1 @ttk/app-loader
数据状态管理、业务app容器，原app-loader目录代码, 修改内容：

* start函数返回Provider，不绑定dom，删除react-dom
* 更新AppLoader和AppContainer生命周期
* 更新react context使用方式
* 修改其他bug

## 4.2 @ttk/component
公共组件库，目前主要为原json业务使用组件，原components目录代码，修改内容：

* 更新antd 3.26版本，封装新增组件
* 分离业务组件
* 简化样式文件，组件目录和less文件统一调整为导出名称（首字母小写），根据该名称进行按需加载
* 其他样式问题、bug修复

## 4.3 @ttk/meta-engine
json页面渲染引擎，原meta-engine目录代码，修改内容：

* app顶层element的className增加ttk-json-app，用于统一后的新框架样式兼容

## 4.4 @ttk/fx-webpack
使用webpack5统一开发、打包配置文件，减少过多配置文件和打包命令，使用babel缓存、webpack持久化缓存提供编译速度

## 4.5 @ttk/utils
公共工具类，原utils目录代码

# 5 开发规范及使用说明

## 5.1 不规范引用或语法

### 依赖包不要使用相对路径
```
// 直接修改为依赖包，'@ttk/component'或'antd'
import { Checkbox } from '../../../../../node_modules/antd';
// 直接修改为依赖包，'immutable'
import {fromJS} from "../../../node_modules/immutable/dist/immutable";
```

### import或者url()引入vendor目录中的图片资源文件

* 原因：import或者url()的文件webpack会编译打包会生成1份文件，copy-webpack-plugin配置的文件（如vendor目录）会复制生成一份文件，导致重复输出
* 统一用法：
   请移至src/assets/img，使用@/assets/img(@为src别名)引入，或者在fx.webpack.config.js配置别名。当然也可移至业务app内其他合适位置

### 不要使用core-js相关引用，直接使用es6等新语法，编译会兼容的。
```
import { isArray } from "core-js/fn/array"; // 删除，直接使用Array.isArray
import { Number } from 'core-js' // 删除，直接使用Number
```

### js文件中不要使用typescript语法, 编译会报错

### 存在无使用的引用

## 5.2 样式使用不规范问题
### 导致不生效
    框架升级后app样式也是按需加载的，app使用其他app定义的样式, 将不在正常显示，应在src/assets/app.less配置app公共样式

### 导致样式覆盖
    app的style.less文件定义的css类选择器，不包括在当前app名称的css类选择器下，则当app加载时，会覆盖其他app的样式

## 5.3 data.js中组件不规范使用
### data.js中使用div、a、span等原生html元素请在前面带::，例如::div、::a、::span。不带浏览器console会报错（新框架修改为警告）
### 数组中组件使用相同的name，浏览器console会报错，影响react渲染性能

## 5.4 不能直接修改React创建的element的props，新版本React已禁止

## 5.5 app名称的css类选择器下的样式在modal不生效，不应该采取定义全局css类选择器的方式，因为modal是全局的，会影响其他app的modal，应该把app名称的css类选择器名称（或者自定义唯一的类选择器名称）传给modal

```
const ret = await this.metaAction.modal('confirm', {
    title: '',
    // 传给modal的className
    className: 'ttk-scm-app-inventory-automaticcalculationxb-confirm',
    width: 400,
    content: <p>{title}</p>
})
```