feat✨: add KeepAlive

README.md

@@ -9,6 +9,7 @@
 - ~~docker 部署方案~~
 - ~~封装虚拟列表，集成到 antd table 中~~
   - 使用哈希重构数据格式 增加查询速度
+- 自己实现一个 keep-alive
 - 单元 测试
 - ~~UI 自动化测试 puppeteer~~
 - threejs 着色器
@@ -298,3 +299,18 @@ export default compose(
       layout,
     },
 ```
+
+## keepAlive
+
+```tsx | pure
+import { KeepAlive } from '@/core/base/KeepAlive';
+
+<KeepAlive></KeepAlive>;
+
+export default compose<typeof Activity>(
+  withRoutePage,
+  withRouter,
+  connect(({ global, login }: ConnectState) => ({ token: login.token })),
+  KeepAliveTransfer,
+)(Activity);
+```

src/core/Enhance/Authorized.tsx

@@ -4,6 +4,8 @@ import { History } from 'history';
 import React, { useEffect } from 'react';
 import { Navigate } from 'react-router-dom';
 import { RouteComponentProps } from '@umijs/renderer-react';
+import { withRoutePage } from './withRoutePage';
+import { compose } from 'redux';
 
 interface IProps extends RouteComponentProps<any> {
   token: string;
@@ -31,7 +33,11 @@ const Authorized: React.FC<IProps> = (props) => {
   return <Outlet />;
 };
 
-export default connect(({ login, global }: ConnectState) => ({
-  token: login.token,
-  userInfo: global.userInfo,
-}))(withRouter<IProps>(Authorized));
+export default compose<IProps>(
+  withRoutePage,
+  withRouter,
+  connect(({ global, login }: ConnectState) => ({
+    token: login.token,
+    userInfo: global.userInfo,
+  })),
+)(Authorized);

src/core/base/KeepAlive/KeepAlive.tsx

@@ -0,0 +1,73 @@
+import React, { FC, useCallback, useReducer } from 'react';
+import { IKeepAliveContext, KeepAliveContext } from './KeepAliveContext';
+import { KeepAliveActions, keepAliveReducer, KeepAliveState } from './KeepAliveReducer';
+import * as actionTypes from './actionTypes';
+
+interface IKeepAliveProps {
+  children: React.ReactNode;
+}
+
+export type ISetKeepAliveState = (arg: KeepAliveActions['payload']) => void;
+
+/**
+ * {
+ *  keepAliveId: 'class'
+ *  reactElement: ReactElement
+ *  nodes: Node[]
+ *  status: 'CREATING' | 'CREATED'
+ * }
+ */
+
+const KeepAlive: FC<IKeepAliveProps> = (props) => {
+  const [keepAliveStates, dispatch] = useReducer(keepAliveReducer, {});
+
+  const setKeepAliveState: ISetKeepAliveState = useCallback(
+    ({ reactElement, keepAliveId }) => {
+      if (!keepAliveStates[keepAliveId]) {
+        dispatch({
+          type: actionTypes.CREATING,
+          payload: {
+            keepAliveId,
+            reactElement,
+          },
+        });
+      }
+    },
+    [keepAliveStates],
+  );
+
+  return (
+    <KeepAliveContext.Provider
+      value={{
+        keepAliveStates,
+        setKeepAliveState,
+        dispatch,
+      }}
+    >
+      {props.children}
+      {Object?.values(keepAliveStates).map((state) => {
+        const { keepAliveId, reactElement } = state;
+        return (
+          <div
+            key={keepAliveId}
+            ref={(node) => {
+              if (node && !keepAliveStates[keepAliveId]?.nodes) {
+                dispatch({
+                  type: actionTypes.CREATED,
+                  payload: {
+                    keepAliveId,
+                    nodes: Array.from(node.childNodes) as any[],
+                  },
+                });
+              }
+            }}
+          >
+            {reactElement}
+          </div>
+        );
+      })}
+    </KeepAliveContext.Provider>
+  );
+};
+
+export default KeepAlive;

src/core/base/KeepAlive/KeepAliveContext.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import { ISetKeepAliveState } from './KeepAlive';
+import { KeepAliveActions, KeepAliveState } from './KeepAliveReducer';
+
+export interface IKeepAliveContext {
+  keepAliveStates: KeepAliveState;
+  setKeepAliveState: ISetKeepAliveState;
+  dispatch: React.Dispatch<KeepAliveActions>;
+}
+
+export const KeepAliveContext = createContext<IKeepAliveContext>({} as IKeepAliveContext);

src/core/base/KeepAlive/KeepAliveReducer.ts

@@ -0,0 +1,61 @@
+import * as actionTypes from './actionTypes';
+
+export interface KeepAliveState {
+  [key: string]: {
+    keepAliveId: string;
+    reactElement?: React.ReactElement;
+    status: string;
+    nodes?: Array<React.ReactElement>;
+  };
+}
+
+const initialState = {};
+
+export type KeepAliveActions =
+  | {
+      type: 'CREATING';
+      payload: {
+        keepAliveId: string;
+        reactElement?: React.ReactElement;
+        nodes?: Array<HTMLDivElement>;
+      };
+    }
+  | {
+      type: 'CREATED';
+      payload: {
+        keepAliveId: string;
+        reactElement?: React.ReactElement;
+        nodes?: Array<HTMLDivElement>;
+      };
+    };
+
+export function keepAliveReducer(state: KeepAliveState | any, action: KeepAliveActions): KeepAliveState {
+  const { type, payload } = action;
+  const { keepAliveId, reactElement, nodes } = payload;
+  switch (action.type) {
+    case actionTypes.CREATING: {
+      return {
+        ...state,
+        [keepAliveId]: {
+          keepAliveId,
+          reactElement,
+          status: type,
+          nodes: null,
+        },
+      };
+    }
+    case actionTypes.CREATED: {
+      return {
+        ...state,
+        [keepAliveId]: {
+          ...state[keepAliveId],
+          status: type,
+          nodes,
+        },
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+}

src/core/base/KeepAlive/KeepAliveTransfer.tsx

@@ -0,0 +1,35 @@
+import React, { useContext, useEffect } from 'react';
+import { KeepAliveContext } from './KeepAliveContext';
+
+interface IKeepAliveTransferProps {
+  KeepAliveComponent: React.ComponentType;
+  keepAliveId: string;
+}
+
+const KeepAliveTransfer = <Props extends IKeepAliveTransferProps>(
+  KeepAliveComponent: React.ComponentType<Props> | any,
+  keepAliveId?: string,
+) => {
+  const displayName = KeepAliveComponent.displayName || KeepAliveComponent.name || keepAliveId;
+
+  return (props: Omit<Props, keyof IKeepAliveTransferProps>) => {
+    const _ref = React.useRef<HTMLDivElement>(null!);
+    const { keepAliveStates, setKeepAliveState } = useContext(KeepAliveContext);
+
+    useEffect(() => {
+      const state = keepAliveStates[displayName];
+      if (state && state?.nodes) {
+        state.nodes.forEach((node: any) => _ref.current.appendChild(node));
+      } else {
+        setKeepAliveState({
+          keepAliveId: displayName,
+          reactElement: <KeepAliveComponent {...(props as Props)} />,
+        });
+      }
+    }, [keepAliveStates, setKeepAliveState, props]);
+
+    return <div ref={_ref} />;
+  };
+};
+
+export default KeepAliveTransfer;

src/core/base/KeepAlive/README.md

@@ -0,0 +1,24 @@
+## Context
+
+- 将组件 dom 缓存保存在一个对象中
+- id: {nodes,ReactElement,status}
+
+## 结构
+
+- Provider => 方法 属性
+  - 组件 => nodes => 设置缓存的方法 组件的缓存
+
+## use
+
+```tsx | pure
+import { KeepAlive } from '@/core/base/KeepAlive';
+
+<KeepAlive></KeepAlive>;
+
+export default compose<typeof Activity>(
+  withRoutePage,
+  withRouter,
+  connect(({ global, login }: ConnectState) => ({ token: login.token })),
+  KeepAliveTransfer,
+)(Activity);
+```

src/core/base/KeepAlive/actionTypes.ts

@@ -0,0 +1,2 @@
+export const CREATING = 'CREATING';
+export const CREATED = 'CREATED';

src/core/base/KeepAlive/index.tsx

@@ -0,0 +1,4 @@
+import KeepAlive from './KeepAlive';
+import KeepAliveTransfer from './KeepAliveTransfer';
+
+export { KeepAlive, KeepAliveTransfer };

src/core/base/Login/index.less

@@ -1,6 +1,6 @@
 .site-pro-form-login-container {
   position: fixed;
-  z-index: -999;
+  z-index: 999;
   display: grid;
   overflow: auto;
   width: 100%;
@@ -36,4 +36,4 @@
   font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, noto sans, sans-serif,
     apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
   line-height: 1.5714285714285714;
-}
+}

src/core/layouts/BasicLayout.tsx

@@ -5,7 +5,7 @@ import GlobalHeader from '@/core/base/GlobalHeader';
 import TagsNav from '@/core/base/TagsNav';
 import { ConnectState } from '@/typings/connect';
 import { connect, Dispatch, getDvaApp, Helmet, History, Outlet, withRouter } from '@umijs/max';
-import { RouteComponentProps } from '@umijs/renderer-react';
+import { RouteComponentProps, useAppData, useLocation } from '@umijs/renderer-react';
 import { ConfigProvider, Layout, Spin, theme as antdTheme, TourProps, Tour, FloatButton } from 'antd';
 import _ from 'lodash';
 import { BellOutlined } from '@ant-design/icons';
@@ -15,6 +15,8 @@ import { FC, Fragment, useEffect, useState, useRef } from 'react';
 import ColorPicker from '../base/GlobalHeader/ColorPicker';
 import styles from './index.less';
 import IndexPage from './IndexPage';
+import { KeepAlive, KeepAliveTransfer } from '../base/KeepAlive';
+
 const { Sider, Content, Header } = Layout;
 const { title } = config;
 
@@ -34,6 +36,7 @@ export interface IRgba {
 }
 
 const BasicLayout: FC<IBasicLayout> = (props) => {
+  const { routes } = useAppData();
   const [isDark, setIsDark] = useState<boolean>(false);
   const [color, setColor] = useState<IRgba>({
     r: '25',
@@ -48,6 +51,9 @@ const BasicLayout: FC<IBasicLayout> = (props) => {
   const ref3 = useRef<HTMLDivElement>(null!);
   const { menuList, breadcrumbNameMap, children, theme, collapsed, location, sliderMenuState, dispatch, userInfo } =
     props;
+  const currentRoutesObj = Object.values(routes).filter((item) => item?.path == location.pathname)?.[0];
+  // TODO: routes 添加keepAlive配置
+  // const hasKeepAlive = currentRoutesObj?.keepAlive;
 
   const steps: TourProps['steps'] = [
     {
@@ -161,7 +167,9 @@ const BasicLayout: FC<IBasicLayout> = (props) => {
                 <Sider theme={theme} style={{ background: 'transparent', display: collapsed ? 'none' : '' }}>
                   <SiderMenu {...siderMenuProps} ref0={ref0} />
                 </Sider>
-                <Content>{location.pathname !== '/' ? <Outlet /> : <IndexPage />}</Content>
+                <Content>
+                  <KeepAlive>{location.pathname !== '/' ? <Outlet /> : <IndexPage />}</KeepAlive>
+                </Content>
               </Layout>
             </WaterMark>
           </Layout>

src/pages/Component/class/index.tsx

@@ -19,6 +19,7 @@ import { getFieldComp } from '@/core/helpers';
 import { withRoutePage } from '@/core/Enhance/withRoutePage';
 import { compose } from 'redux';
 import { ConnectState } from '@/typings/connect';
+import { KeepAliveTransfer } from '@/core/base/KeepAlive';
 const { apiPrefixMock } = projectConfig;
 
 interface IProps {}
@@ -253,4 +254,5 @@ export default compose<typeof Activity>(
   withRoutePage,
   withRouter,
   connect(({ global, login }: ConnectState) => ({ token: login.token })),
+  KeepAliveTransfer,
 )(Activity);

src/pages/Component/hook/index.tsx

@@ -22,6 +22,7 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { compose } from 'redux';
 import _ from 'lodash';
 import { withRouter } from '@/core/Enhance/withRouter';
+import { KeepAliveTransfer } from '@/core/base/KeepAlive';
 
 interface IProps {
   IndexPageRef: Ref<IHandle>;
@@ -257,6 +258,7 @@ const NewIndexPage = compose<typeof IndexPage>(
     pure: undefined,
   }),
   forwardRef,
+  KeepAliveTransfer,
 )(IndexPage);
 
 const Content = () => {

src/pages/FileViewer/index.tsx

@@ -1,2 +1,11 @@
 import FileView from '@/components/FileViewer/demo/demo';
-export default FileView;
+import { KeepAliveTransfer } from '@/core/base/KeepAlive';
+import { withRoutePage } from '@/core/Enhance/withRoutePage';
+import { withRouter } from '@umijs/max';
+import { compose } from 'redux';
+
+const IndexPage = () => {
+  return <FileView />;
+};
+
+export default compose(withRoutePage, withRouter, KeepAliveTransfer)(IndexPage);