feats

package.json

@@ -48,11 +48,11 @@
     "@tarojs/taro": "3.5.7",
     "@tarojs/taro-h5": "3.5.7",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
+    "echarts": "5.4.1",
     "echarts-for-weixin": "^1.0.2",
     "md5": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "echarts": "5.4.1"
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",

src/components/PowerList/index.jsx

@@ -2,9 +2,10 @@ import React from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
 import { PowerScrollView } from '@antmjs/vantui';
+import useShow from '@/layouts/hooks/useShow';
 
 export default React.forwardRef((props, ref) => {
-  const { request, params, renderItem, onLoadingChange } = props;
+  const { request, params, renderItem, onLoadingChange, onDataChange } = props;
 
   const pageSize = 20;
   const pageNumRef = React.useRef(1);
@@ -31,11 +32,11 @@ export default React.forwardRef((props, ref) => {
       }).then((res) => {
         const { records, current, pages } = res;
 
-        if (current == 1) {
-          setList(records || []);
-        } else {
-          setList(listRef.current.concat(records || []));
+        let dataset = current == 1 ? records || [] : listRef.current.concat(records || [])
+        if (onDataChange) {
+          dataset = onDataChange(dataset)
         }
+        setList(dataset);
 
         setFinished(current >= pages);
         changeLoading(false);
@@ -47,22 +48,28 @@ export default React.forwardRef((props, ref) => {
     });
   }, [request, params]);
 
+  const refresh = React.useCallback(() => {
+    pageNumRef.current = 1;
+    queryData({pageNum : pageNumRef.current});
+  }, [queryData]);
+
   const onScrollToLower = React.useCallback((event = 0, isRefresh = false) => {
     pageNumRef.current += 1;
     return queryData({pageNum : pageNumRef.current});
   }, [queryData]);
 
-  React.useEffect(() => {
-    pageNumRef.current = 1;
-    queryData({pageNum : pageNumRef.current});
-  }, [queryData]);
+  // React.useEffect(() => {
+  //   refresh();
+  // }, [refresh]);
 
   React.useImperativeHandle(ref, () => ({
-    refresh: () => {
-      pageNumRef.current = 1;
-      queryData({pageNum : pageNumRef.current});
-    }
+    refresh,
+    updateData: (dt) => setList(dt),
   }));
+
+  useShow(() => {
+    refresh();
+  }, [refresh]);
   
   return (
     <PowerScrollView

src/layouts/hooks/useShow.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { useModel } from '@/store';
+
+/**
+ * 页面显示, 隐藏 hook, 可以在 component 中使用
+ */
+export default (fn, deps = []) => {
+  const fnRef = React.useRef();
+  fnRef.current = fn;
+
+  const { getPageCtx } = useModel('page');
+  const { show } = React.useContext(getPageCtx());
+
+  React.useEffect(() => {
+    if (show) {
+      fnRef.current();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [show, ...deps]);
+}

src/layouts/index.jsx

@@ -8,12 +8,18 @@ import Auth from '@/components/Auth';
 import TabBar from './TabBar';
 import laySty from './layout.module.less';
 
-const f = x => x;
-
 export default (props) => {
-  const { className, style, roles, tabBar = false, loading, onShow = f, onHide = f } = props;
+  const { className, style, roles, tabBar = false, loading } = props;
 
   const { person, user, duty } = useModel('user');
+  const { setPageCtx } = useModel('page');
+  const [pageShow, setPageShow] = React.useState(false);
+  const PageContext = React.useMemo(() => {
+    const ctx = React.createContext();
+    setPageCtx(ctx);
+
+    return ctx;
+  }, []);
 
   const containerClass = `${laySty['page-conatiner']} ${tabBar ? laySty['with-tabbar'] : ''} ${className}`;
 
@@ -34,37 +40,50 @@ export default (props) => {
     };
   });
 
-  Taro.useDidShow(onShow);
-  Taro.useDidHide(onHide);
+  Taro.useDidShow(() => {
+    // useDidShow 比 React Hook 要早
+    // 所以使用 nextTick
+    Taro.nextTick(() => {
+      setPageShow(true);
+    });
+  });
+
+  Taro.useDidHide(() => {
+    Taro.nextTick(() => {
+      setPageShow(false);
+    });
+  })
 
   return (
-    <View className={laySty['page-wrapper']}>
-      <Notify id="vanNotify" />
-      <Dialog id="vanDialog" />
-      <NavLoading loading={loading} />
-      <View className={containerClass} style={style}>
-        {
-          !person && (
-            <View className={laySty.loading}>
-              <Loading size="32px" vertical>
-                加载中...
-              </Loading>
-            </View>
-          )
-        }
-        <Auth roles={roles}>
-          {props.children}
-        </Auth>
+    <PageContext.Provider value={{show: pageShow}}>
+      <View className={laySty['page-wrapper']}>
+        <Notify id="vanNotify" />
+        <Dialog id="vanDialog" />
+        <NavLoading loading={loading} />
+        <View className={containerClass} style={style}>
+          {
+            !person && (
+              <View className={laySty.loading}>
+                <Loading size="32px" vertical>
+                  加载中...
+                </Loading>
+              </View>
+            )
+          }
+          <Auth roles={roles}>
+            {props.children}
+          </Auth>
 
+          {
+            !tabBar && (
+              <View className={laySty['pdm-space']}></View>
+            )
+          }
+        </View>
         {
-          !tabBar && (
-            <View className={laySty['pdm-space']}></View>
-          )
+          tabBar && <TabBar className={laySty['page-tabbar']} active={tabBar} duty={duty} />
         }
       </View>
-      {
-        tabBar && <TabBar className={laySty['page-tabbar']} active={tabBar} duty={duty} />
-      }
-    </View>
+    </PageContext.Provider>
   )
 }

src/pages/home/components/StatCard.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View } from '@tarojs/components';
 import { ROLE_CITIZEN } from '@/utils/user';
 import { getIndexData } from '@/services/stat';
+import useShow from '@/layouts/hooks/useShow';
 import style from './stat-card.module.less';
 
 export default React.forwardRef((props, ref) => {
@@ -16,11 +17,11 @@ export default React.forwardRef((props, ref) => {
     ].filter(Boolean).join(' ');
   }, [duty])
 
-  React.useEffect(() => {
-    if (duty) {
-      getIndexData(duty).then(setList);
-    }
-  }, [duty]);
+  // React.useEffect(() => {
+  //   if (duty) {
+  //     getIndexData(duty).then(setList);
+  //   }
+  // }, [duty]);
 
   React.useImperativeHandle(ref, () => ({
     refresh: () => {
@@ -30,6 +31,12 @@ export default React.forwardRef((props, ref) => {
     }
   }), [duty]);
 
+  useShow(() => {
+    if (duty) {
+      getIndexData(duty).then(setList);
+    }
+  }, [duty]);
+
   return (
     <View className={classNames}>
       <View className={style['stat-card']}>

src/pages/home/index.jsx

@@ -73,8 +73,6 @@ const menus = {
 }
 
 export default (props) => {
-
-  const statRef = React.useRef();
   const userModel = useModel('user');
   const { user, duty, signOut, changePwd } = userModel || {};
 
@@ -84,19 +82,15 @@ export default (props) => {
     return menus[duty];
   }, [duty])
 
-  const onShow = () => {
-    statRef.current?.refresh();
-  }
-
   return (
-    <Page tabBar="home" className="home-page" onShow={onShow}>
+    <Page tabBar="home" className="home-page">
       <Head
         userModel={userModel}
         onChangePwd={changePwd}
         onExit={signOut}
       />
       <Banner duty={duty} />
-      <StatCard duty={duty} ref={statRef} />
+      <StatCard duty={duty} />
 
       <View className="menu-icons">
         {

src/pages/issue/list/index.jsx

@@ -7,7 +7,6 @@ import PowerList from '@/components/PowerList';
 import Card from '@/components/IssueCard';
 import { getTaIssue } from '@/services/taissue';
 import { ROLE_INSPECTOR, ROLE_MANAGER } from '@/utils/user';
-import { useModel } from '@/store';
 import { getIssueStatus, PROCESS_ASSIGNED, PROCESS_END, PROCESS_START } from '@/utils/biz';
 
 // 只有督查员能看到当前页面

src/store/index.js

@@ -1,13 +1,16 @@
 import { createStore } from '@zjxpcyc/react-tiny-store';
 import useUser from './user';
+import usePage from './page';
 
 const models = {
   'user': useUser,
+  'page': usePage,
 };
 
 const store = createStore(models);
 
 export default store;
+export const getState = store.getState;
 export const useModel = store.useModel;
 export const Provider = store.Provider;
 

src/store/page.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default () => {
+  const pageCtxRef = React.useRef();
+
+  const setPageCtx = (pg) => {
+    pageCtxRef.current = pg;
+  }
+  const getPageCtx = () => {
+    return pageCtxRef.current;
+  }
+
+  return {
+    setPageCtx,
+    getPageCtx,
+  }
+}

yarn.lock

@@ -5013,6 +5013,19 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts-for-weixin@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/echarts-for-weixin/-/echarts-for-weixin-1.0.2.tgz#f32f46dc40fdc60d9a97637e5694df01b8a060ed"
+  integrity sha512-cEk4yFMCJDQpvAgVRKbGvMjXvuW965iEUootJffRFHwJwCq0/GIeoRTTAEuj50PKMMtLTW4DmBPmvPja3sH2jQ==
+
+echarts@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz#d7f65a584d78beff62568d878b16151b3381811c"
+  integrity sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.4.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -11938,6 +11951,11 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.npmmirror.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -12847,3 +12865,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zrender@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz#892f864b885c71e1dc25dcb3c7a4ba42678d3f11"
+  integrity sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==
+  dependencies:
+    tslib "2.3.0"