refactor: 剔除组件缓存

package.json

@@ -91,7 +91,6 @@
       "react-app"
     ],
     "plugins": [
-      "react-activation/babel",
       [
         "import",
         {
@@ -120,10 +119,7 @@
     "@types/nprogress": "^0.2.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
-    "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",
-    "@types/redux": "^3.6.0",
-    "@types/redux-thunk": "^2.1.0",
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.1.1",
     "@typescript-eslint/parser": "^4.1.1",
@@ -206,7 +202,6 @@
     "rc-queue-anim": "^1.8.5",
     "rc-tween-one": "^2.7.3",
     "react": "^17.0.1",
-    "react-activation": "^0.7.0",
     "react-dom": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/App.tsx

@@ -2,20 +2,18 @@ import Guards from '@/components/Navigation'
 import history from '@/utils/history'
 import 'nprogress/nprogress.css'
 import React from 'react'
-import { AliveScope } from 'react-activation'
 import { Router, Switch } from 'react-router-dom'
 import './index.scss'
+
 import { routeConfig } from './router/routes'
 const App = () =>{
 
   return (
     <div className="App">
       <Router history={ history }>
-        <AliveScope>
           <Switch>
             <Guards routeConfig={routeConfig} />
           </Switch>
-        </AliveScope>
       </Router >
     </div>
   )

src/components/AsyncModuleLoader/index.tsx

@@ -23,7 +23,10 @@ export default function AyncModuleLoader(importComponent: any) {
             })
             NProgress.done()
         }
-
+        // shouldComponentUpdate(nextProps: any, nextState: any) {
+        //     console.log(nextProps, nextState)
+        //     return true
+        // }
         // componentWillUnmount() {
         //     NProgress.done()
         // }

src/components/Navigation/index.tsx

@@ -4,8 +4,6 @@ import { NavigationGuardsProps, RouteModel } from '@/types/router'
 import consts from '@/utils/consts'
 import { combinationPath } from '@/utils/util'
 import React, { Component } from 'react'
-import KeepAlive from 'react-activation'
-// import { KeepAlive } from 'react-keep-alive'
 import { Redirect, Route } from "react-router-dom"
 
 class NavigationGuards extends Component<NavigationGuardsProps, any> {
@@ -128,7 +126,7 @@ class NavigationGuards extends Component<NavigationGuardsProps, any> {
 function LoginHandler(props: { targetRoute: RouteModel, ErrorPage: any }): any {
   const { targetRoute, ErrorPage } = props
   const { path, auth } = targetRoute
-  const noCache = targetRoute.meta?.noCache ? targetRoute.meta.noCache : false
+  // const noCache = targetRoute.meta?.noCache ? targetRoute.meta.noCache : false
 
   if (path === '/login') {
     return <Redirect to="/console/dashboard" />
@@ -136,13 +134,13 @@ function LoginHandler(props: { targetRoute: RouteModel, ErrorPage: any }): any {
     return (
       <Route path={path} render={
         props => (
-          noCache ?
-            <targetRoute.component {...props} routeConfig={targetRoute.childRoutes} /> :
-            (
-              <KeepAlive>
-                <targetRoute.component {...props} routeConfig={targetRoute.childRoutes} />
-              </KeepAlive>
-            )
+          // noCache ?
+            <targetRoute.component {...props} routeConfig={targetRoute.childRoutes} />
+            // (
+            //   <KeepAlive name={path}>
+            //     <targetRoute.component {...props} routeConfig={targetRoute.childRoutes} />
+            //   </KeepAlive>
+            // )
         )
       } />
     )

src/components/RuleModal/index.tsx

@@ -132,7 +132,6 @@ const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
       ruleModalIniter()
     }
   }, [ visible, type ])
-  // useActivate(() => ruleModalIniter())
   return (
     <Modal
       getContainer={false}

src/index.tsx

@@ -6,7 +6,7 @@ import zhCN from 'antd/lib/locale/zh_CN'
 import { ConfigProvider } from 'antd'
 ReactDOM.render(
   <ConfigProvider locale={zhCN}>
-    <App />
+      <App />
   </ConfigProvider>,
   document.getElementById('root')
 )

src/pages/Contract/Content/Summary/index.tsx

@@ -2,7 +2,6 @@ import Header from '@/components/Header'
 import { tenderStore } from '@/store/mobx'
 import consts from '@/utils/consts'
 import React, { useEffect, useState, useMemo } from 'react'
-import { useActivate } from 'react-activation'
 import { apiGetContractSurvey } from './api'
 import Content from './components/Content'
 import './index.scss'
@@ -34,8 +33,8 @@ interface iContractSummaryState {
 export default function Summary() {
   useEffect(() => {
     initData()
-  }, [ tenderStore.bid ])
-  useActivate(() => initData())
+  }, [])
+
   const [ state, setState ] = useState<iContractSummaryState>({
     expenditureData: {
       closeNumber: 0,

src/pages/Contract/List/index.tsx

@@ -9,18 +9,15 @@ import { useAutoTable, useContractTree, useTableExpand } from '@/utils/common/cu
 import { Button, Dropdown, Menu, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import React, { useState, useEffect } from 'react'
-import { useAliveController } from 'react-activation'
 import styles from './index.module.scss'
 import { apiContractList } from '@/utils/common/api'
 import { formatMoney, handleIntoBidsection } from '@/utils/util'
 const List: React.FC<{}> = () => {
   const needSubtractHeight = 34 + 32
   const [ y ] = useAutoTable(needSubtractHeight)
-  const { clear } = useAliveController()
   const [ loading, setLoading ] = useState<boolean>(false)
   useEffect(() => {
     // 清除所有的缓存页面
-    clear()
     getTree()
   }, [])
 

src/pages/Login/index.module.scss

@@ -1,5 +1,6 @@
 .loginForm {
   max-width: 400px;
+  min-height: 347px;
   padding: 30px;
   margin-left: 140px;
   background: #ffffff;

src/pages/Login/index.tsx

@@ -3,11 +3,11 @@ import { userStore } from '@/store/mobx'
 import { iFromValues, iLoginProps, iRetrieveFormProps } from '@/types/login'
 import consts from '@/utils/consts'
 import { Button, Form, Input, Modal } from 'antd'
-import React, { useState, useEffect } from 'react'
-import { useAliveController } from 'react-activation'
+import React, { useState } from 'react'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { apiProject } from "./api"
 import styles from './index.module.scss'
+import QueueAnim from 'rc-queue-anim'
 import './index.scss'
 // 正常登录Form表单
 const initLoginState = {
@@ -18,11 +18,8 @@ const initLoginState = {
 }
 
 type iState = typeof initLoginState
-const NormalLoginForm:React.FC<iLoginProps> = () => {
-  const { clear } = useAliveController()
-  useEffect(() => {
-    clear()
-  }, [])
+const NormalLoginForm: React.FC<iLoginProps> = () => {
+
   const [ state, setState ] = useState<iState>(initLoginState)
   const onFinish = (values: iFromValues) => {
     userStore.login(values)
@@ -48,43 +45,59 @@ const NormalLoginForm:React.FC<iLoginProps> = () => {
     setState({ ...state, visible: !state.visible })
   }
 
-    return (
-      <Form
-        name="normal_login"
-        className={styles.loginForm}
-        // initialValues={{ password: '123456', code : '234' }}
-        onFinish={onFinish}
-      >
-        <h4>纵横工程建设项目管理系统</h4>
-        <h5 className={[ 'project-title' ].join(' ')} >{state.projectInfo}</h5>
-        <Form.Item
-          name="code"
-          rules={[ { required: true, message: '请输入项目编号!' } ]}
-        >
-          <Input placeholder="项目编号" onChange={handleProjectCode} autoFocus/>
-        </Form.Item>
-        <Form.Item
-          name="account"
-          rules={[ { required: true, message: '请输入账号!' } ]}
-        >
-          <Input placeholder="登录账号" />
-        </Form.Item>
-        <Form.Item
-          name="password"
-          rules={[ { required: true, message: '请输入密码!' } ]}
-        >
-          <Input.Password type="password" placeholder="密码" />
-        </Form.Item>
-
-        <Form.Item>
-          <Button type="primary" htmlType="submit">登录</Button>
-        </Form.Item>
+  return (
+    <Form
+      name="normal_login"
+      className={styles.loginForm}
+      // initialValues={{ password: '123456', code : '234' }}
+      onFinish={onFinish}
+    >
+      <h4>纵横工程建设项目管理系统</h4>
+      <h5 className={[ 'project-title' ].join(' ')} >{state.projectInfo}</h5>
+
+      <QueueAnim >
+        <div key="code">
+          <Form.Item
+            name="code"
+            rules={[ { required: true, message: '请输入项目编号!' } ]}
+          >
+            <Input placeholder="项目编号" onChange={handleProjectCode} />
+          </Form.Item>
+        </div>
+        <div key="account">
+          <Form.Item
+            name="account"
+            rules={[ { required: true, message: '请输入账号!' } ]}
+          >
+            <Input placeholder="登录账号" />
+          </Form.Item>
+
+        </div>
+        <div key="password">
+          <Form.Item
+            name="password"
+            rules={[ { required: true, message: '请输入密码!' } ]}
+          >
+            <Input.Password type="password" placeholder="密码" />
+          </Form.Item>
+
+        </div>
+
+        <div key="button">
+          <Form.Item>
+            <Button type="primary" htmlType="submit">登录</Button>
+          </Form.Item>
+
+        </div>
+
         {/* <div className={styles.textRight}>
-          <span onClick={this.handleForgetPsw}>忘记密码?</span>
-        </div> */}
-        <RetrieveForm visible={state.visible} setVisible={setVisible} />
-      </Form>
-    )
+            <span onClick={this.handleForgetPsw}>忘记密码?</span>
+          </div> */}
+        {/* <RetrieveForm visible={state.visible} setVisible={setVisible} /> */}
+
+      </QueueAnim>
+    </Form>
+  )
 }
 
 // 找回密码Form表单

src/pages/Management/Tender/List/index.tsx

@@ -165,7 +165,6 @@ const Tender: React.FC<{}> = () => {
     getTree()
   }, [])
 
-  // useActivate(() => getTree())
   const getTree = async () => {
     const { data = {}, code = -1 } = await apiTree()
     if (code === consts.RET_CODE.SUCCESS) {

src/pages/Management/Tender/Member/index.tsx

@@ -3,7 +3,7 @@ import { ZhButton, ZhDangerButton } from '@/components/Button'
 import Header from '@/components/Header'
 import Slot from '@/components/Header/slot'
 import SvgIcon from '@/components/SvgIcon'
-import { tenderStore, userStore } from '@/store/mobx'
+import { userStore } from '@/store/mobx'
 import { iAccountGroupItem, iPermissionData, iUserInfo } from '@/types/setting'
 import { getUserGroup } from '@/utils/common/user'
 import consts from '@/utils/consts'
@@ -11,7 +11,6 @@ import { Button, Input, message, Popover, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import { observer } from 'mobx-react'
 import React, { useState, useEffect, ChangeEvent } from 'react'
-import { useActivate } from 'react-activation'
 import { RouteComponentProps } from 'react-router'
 import { apiCreateBidAccount, apiDelBidAccount, apiGetSettingAccount, apiUpdateBidAccountAuth } from './api'
 import PermissionModal from './modal'
@@ -81,7 +80,6 @@ const Member: React.FC<RouteComponentProps> = props => {
     initData()
   }, [])
 
-  useActivate(() => initData())
   const initData = async () => {
     setState({ ...state, loading: true })
     const { code = -1, data } = await apiGetSettingAccount(id)

src/pages/Quality/Content/Info/Detail/index.tsx

@@ -81,6 +81,7 @@ const Detail: React.FC<RouteComponentProps> = props => {
   useEffect(() => {
     initData()
   }, [ id ])
+
   const initData = async () => {
     const { code = -1, data = {} } = await apiGetQualityDetail(id)
     if (code === consts.RET_CODE.SUCCESS) {

src/pages/Quality/Content/Info/Summary/index.tsx

@@ -3,7 +3,6 @@ import { tenderStore } from '@/store/mobx'
 import consts from '@/utils/consts'
 import dayjs from 'dayjs'
 import React, { useEffect, useState, useMemo } from 'react'
-import { useActivate } from 'react-activation'
 import { Link } from 'react-router-dom'
 import { apiGetqualitySurvey } from './api'
 import ColumnChart from './columnChart'
@@ -46,10 +45,7 @@ const Summary: React.FC<{}> = () => {
   useEffect(() => {
     initData()
   }, [ tenderStore.bid ])
-  useActivate(() => {
-    initData()
-  })
-  useActivate(() => initData())
+
   const initData = async () => {
     const { data, code = -1 } = await apiGetqualitySurvey(tenderStore.bid)
     if (code === consts.RET_CODE.SUCCESS) {

src/pages/Quality/Content/List/index.tsx

@@ -28,16 +28,25 @@ interface iQualityList {
   auditName: string
   fileCounts: number
 }
-interface iModal {
-  visible: boolean
-  loading: boolean
-}
 
 const QualityList: React.FC<{}> = () => {
   const [ state, setState ] = useListModal(consts.DATA_TYPE.QUALITY)
+
+  const initData = async (pageNo: number = 1, pageSize: number = consts.PAGE_SIZE) => {
+    const initModal = {
+      ruleModal: { loading: false, visible: false },
+      addModal: { loading: false, visible: false }
+    }
+    const { code = -1, data = [], total = 0 } = await apiQualityList(tenderStore.bid, pageNo, pageSize)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, dataList: data, total, ...initModal })
+    }
+  }
+
   useEffect(() => {
     initData()
   }, [])
+
   const columns: ColumnsType<iQualityList> = [
     {
       title: '序号',
@@ -99,23 +108,7 @@ const QualityList: React.FC<{}> = () => {
       }
     }
   ]
-  // const [ qualityList, setQualityList ] = useState<iQualityList[]>([])
-  // const [ total, setTotal ] = useState<number>(0)
-  const initData = (pageNo: number = 1, pageSize: number = consts.PAGE_SIZE) => {
-    const initModal = {
-      ruleModal: { loading: false, visible: false },
-      addModal: { loading: false, visible: false }
-    }
-    apiQualityList(tenderStore.bid, pageNo, pageSize)
-      .then(({ code = -1, data = [], total = 0 }) => {
-        if (code === consts.RET_CODE.SUCCESS) {
-          setState({ ...state, dataList: data, total, ...initModal })
-        }
-      })
-      .catch(err => {
-        console.log(err)
-      })
-  }
+
 
   const onRuleCreate = async (ruleValue: any) => {
     setState({ ...state, ruleModal: { ...state.ruleModal, loading: true } })

src/pages/Quality/List/index.tsx

@@ -11,16 +11,12 @@ import { CaretDownOutlined } from '@ant-design/icons'
 import { Button, Dropdown, Menu, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import React, { useEffect, useState } from 'react'
-import { useAliveController } from 'react-activation'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import styles from './index.module.scss'
 
 const List: React.FC<RouteComponentProps> = () => {
   const [ y ] = useAutoTable(66)
-  const { clear } = useAliveController()
   useEffect(() => {
-    // 清除所有的缓存页面
-    clear()
     getTree()
   }, [])
   const [ tree, setTree ] = useContractTree()

src/pages/Safe/Content/Info/Detail/index.tsx

@@ -31,6 +31,7 @@ interface iModalObj {
   curPage: number
   loading: boolean
 }
+
 const Detail: React.FC<RouteComponentProps> = props => {
   const { id = '' } = props.location.state as any
   const [ modalObj, setModalObj ] = useState<iModalObj>({
@@ -80,7 +81,8 @@ const Detail: React.FC<RouteComponentProps> = props => {
   }, [ detail.status ])
   useEffect(() => {
     initData()
-  }, [ id ])
+  }, [])
+
   const initData = async () => {
     const { code = -1, data = {} } = await apiGetSafeDetail(id)
     if (code === consts.RET_CODE.SUCCESS) {

src/pages/Safe/Content/Info/Summary/index.tsx

@@ -3,7 +3,6 @@ import { tenderStore } from '@/store/mobx'
 import consts from '@/utils/consts'
 import dayjs from 'dayjs'
 import React, { useEffect, useState, useMemo } from 'react'
-import { useActivate } from 'react-activation'
 import { Link } from 'react-router-dom'
 import { apiGetSafeSurvey } from './api'
 import ColumnChart from './columnChart'
@@ -45,11 +44,8 @@ const Summary: React.FC<{}> = () => {
   })
   useEffect(() => {
     initData()
-  }, [ tenderStore.bid ])
-  useActivate(() => {
-    initData()
-  })
-  useActivate(() => initData())
+  }, [])
+
   const initData = async () => {
     const { data, code = -1 } = await apiGetSafeSurvey(tenderStore.bid)
     if (code === consts.RET_CODE.SUCCESS) {

src/pages/Safe/Content/List/index.tsx

@@ -5,7 +5,6 @@ import Slot from '@/components/Header/slot'
 import RuleModal from '@/components/RuleModal'
 import SvgIcon from '@/components/SvgIcon'
 import { tenderStore } from '@/store/mobx'
-import { iFileModal } from '@/types/file'
 import { iCreateSafe, iSafeList } from '@/types/safe'
 import { safeStatus } from '@/utils/common/constStatus'
 import { useListModal } from '@/utils/common/customHooks'
@@ -13,7 +12,7 @@ import consts from '@/utils/consts'
 import { dayjsFormat } from '@/utils/util'
 import { Button, message, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { apiCreateSafe, apiSafeList, apiSaveRule } from './api'
 import AddModel from './modal'
@@ -25,21 +24,6 @@ interface iModal {
 
 const SafeList: React.FC<{}> = () => {
   const [ state, setState ] = useListModal(consts.DATA_TYPE.SAFE)
-  // const [ ruleModal, setRuleModal ] = useState<iModal>({
-  //   visible: false,
-  //   loading: false
-  // })
-  // const [ addModal, setAddModal ] = useState<iModal>({
-  //   visible: false,
-  //   loading: false
-  // })
-  // const [ fileModal, setFileModal ] = useState<iFileModal>({
-  //   visible: false,
-  //   dataType: consts.DATA_TYPE.SAFE,
-  //   dataId: ''
-  // })
-  // const [ safeList, setSafeList ] = useState<iSafeList[]>([])
-  // const [ total, setTotal ] = useState<number>(0)
   useEffect(() => {
     initData()
   }, [])

src/pages/Safe/List/index.tsx

@@ -9,20 +9,18 @@ import { CaretDownOutlined } from '@ant-design/icons'
 import { Button, Dropdown, Menu, Table } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import React, { useEffect, useState } from 'react'
-import { useAliveController } from 'react-activation'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import styles from './index.module.scss'
 import { apiContractList } from '@/utils/common/api'
 import { handleIntoBidsection } from '@/utils/util'
 const List: React.FC<RouteComponentProps> = () => {
   const [ y ] = useAutoTable(66)
-  const { clear } = useAliveController()
   const [ loading, setLoading ] = useState<boolean>(false)
   useEffect(() => {
     // 清除所有的缓存页面
-    clear()
     getTree()
   }, [])
+
   const getTree = async () => {
     setLoading(true)
     const { data, code = -1 } = await apiContractList(consts.BIDSECTION_TYPE.SAFE)

src/store/mobx/user/index.ts

@@ -90,8 +90,6 @@ class UserState {
             newData.push({ key: parseInt(key), value })
           }
         }
-        console.log(11)
-
         this.groupList = newData
       }
     })