CICDI前端框架升级记录

---

order: 6
title: 更新日志
toc: false
timeline: true

2.0.0

2019-03-08

本次为大版本更新，在框架层面进行了较大的重构，部分框架的用法与上一版本有较大的差别。

• ? 脚手架重构：底层框架改用create-react-app，不再使用dva，但实现了dva的主要特性功能。
• ? TypeScript：全面使用TypeScript进行重写
• ? 代码分割: 基于import()，实现按页面进行代码分隔以及按需要加载
• ? 修复bug：修复原框架的部分bug

更新及调整细节：

• 取消project.config.json静态配置,此功能被projectBuild.config.ts替代，proxy的设置也集成在了projectBuild.config.ts之中
• 考虑路由配置的复杂性，将原有配置从project.config.json中迁移至projectRoute.config.ts之中，为支持代码分隔和按需加载，models和components必须被包在import(‘xx’)之中，如下：

let output: { [key: string]: RouteObj } = {
    Org: {
        path: "/BasicLayout/System/SysSetting/Org",
        models: () => [import("./pages/System/SysSetting/Org/model")],
        component: () => import("./pages/System/SysSetting/Org/index")
    },
    Auth: {
        path: "/BasicLayout/System/SysSetting/Auth",
        models: () => [
            import("./pages/System/SysSetting/Auth/model"),
            import("./pages/System/SysSetting/Menu/model")],
        component: () => import("./pages/System/SysSetting/Auth/index")
    },
}

• 为支持代码分隔，新的路由页面调用，请使用globalData中的getComponent方法，具体详见src/Router.tsx中的示例：

    let Main = globalData.getComponent(globalData.routes.main);

• src目录下，重新增加models文件夹，该文件夹下的所有ts文件会被自动加载
• src目录下，新增myFrame文件夹，该目录实现了原dva的redux封装功能，同时输出connect和FormCreate方法，以更好的支持装饰器，例如：

import { connect,FormCreate } from 'src/myFrame';
import { Form, Input, Select } from 'antd';

const FormItem = Form.Item as any;

@connect()
@FormCreate(Form)
export default class SearchGroup extends React.PureComponent<any,any> {
    ...
}

• model.ts中effect方法发生变化，首先，方法不再需要第二个参数，其次所有put方法中type参数必须把调用路径写全，如下：

 /** 改版之前 */
  effects: {
    *queryByWhere({ payload }, { call, put }) {
        yield put({
          type: 'setList',
          payload: 0
        });
    },
 /** 改版之后 */
    *queryByWhere({ payload }) {
        yield put({
          type: 'Role/setList',
          payload: 0
        });
    },

• model.ts支持原生redux-saga，原生方法入口写在watchers里面，具体用法详见src/pages/System/Login/model.ts
• model.ts中effects方法，默认的模式还是takeEvery,但是，如果effect的方法以_L结尾，则默认为takeLatest模式
• 关于css-in-js，框架做了小的调整，对于.css文件，框架不会默认使用模块化，而对于.less文件，默认使用模块化，为避免命名污染，建议优先使用less
• request.ts，除使用ts进行重新之外，request方法的option参数新增resType选项，选择TEXT，response不会进行json转换
• 新增CommonTable组件，对antd表格进行封装，能根据配置对象，自动生成columns对象，能根据table的父对象的高度，自动计算出自身高度，同时能够对表格显示格式进行替换，具体使用方法，请参考src/pages/System/Examples/Curd/table.tsx
• 原树形多选面板CheckedTreePanel过期，请使用TreeSelectPanel
• 因为componentWillReceiveProps方法即将过期，新框架中对其进行了重写，改用getDerivedStateFromProps，或使用memorization，getDerivedStateFromProps的用法，请参考：React16新的生命周期函数getDerivedStateFromProps的使用