fix: 针对context性能优化提供示例代码

Author: chj_damon

mock/route.ts

@@ -11,13 +11,6 @@ export default {
         name: 'hotel',
         apiUrl: '/hotel',
         description: '酒店',
-        children: [
-          {
-            name: 'hotelInfo',
-            apiUrl: '/hotel/hotelInfo',
-            description: '酒店基本信息',
-          },
-        ],
       },
     ],
     code: 20000,

package.json

@@ -21,7 +21,7 @@
     "test": "jest --passWithNoTests --detectOpenHandles --watch",
     "tsc": "tsc -p ./tsconfig.json",
     "eslint:fix": "eslint --fix --ext .ts,.tsx src/",
-    "prettier:fix": "prettier --check src/**/*.tsx --write",
+    "prettier:fix": "prettier --check src/**/*.{ts,tsx} --write",
     "style:fix": "stylelint src/**/*.{css,less,scss} --fix"
   },
   "config": {
@@ -64,6 +64,7 @@
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
+    "@umijs/fabric": "^2.5.7",
     "@umijs/plugin-esbuild": "^1.1.0",
     "antd-dayjs-webpack-plugin": "^1.0.6",
     "commitizen": "^4.2.3",

src/pages/auth/useAuthService.ts

@@ -1,15 +1,14 @@
 import getContextService from '@/utils/getContextService';
-import { useCallback } from 'react';
-
-// 这个服务将被注册至全局
-export const AuthContext = getContextService(useAuthService);
+import { useCallback, useMemo } from 'react';
 
 /**
  * 权限验证服务
  *
  */
 export default function useAuthService() {
-  const token = window.localStorage.getItem('accessToken');
+  const getToken = useCallback(() => {
+    return window.localStorage.getItem('accessToken');
+  }, []);
 
   const saveToken = useCallback((token: string) => {
     window.localStorage.setItem('accessToken', token);
@@ -20,9 +19,12 @@ export default function useAuthService() {
     window.localStorage.setItem('accessToken', '');
   }, []);
 
-  return {
-    token,
+  return useMemo(() => ({
+    getToken,
     saveToken,
     logout,
-  };
+  }), []);
 }
+
+// 这个服务将被注册至全局
+export const AuthContext = getContextService(useAuthService);

src/pages/auth/wrappers/auth.tsx

@@ -5,7 +5,7 @@ import { AuthContext } from '../useAuthService';
 
 export default (props: IRouteComponentProps) => {
   const authService = useContext(AuthContext);
-  if (authService.token) {
+  if (authService.getToken()) {
     return props.children;
   }
   return <Redirect to="/auth/login" />;

src/pages/hotel/HotelInfo/index.tsx

@@ -1,24 +1,30 @@
 import { Button } from 'antd';
 import { Link } from 'umi';
-import React, { memo, useContext } from 'react';
+import React, { useContext } from 'react';
+import { HotelDispatchContext } from '../useHotelService';
 import HotelOtherInfo from '../HotelOtherInfo';
-import { HotelContext } from '../useHotelService';
+import HotelMetaInfo from '../HotelMetaInfo';
 
-const HotelInfo = () => {
-  const hotelService = useContext(HotelContext);
+export default function HotelInfo() {
+  const {setValue, setName} = useContext(HotelDispatchContext);
 
-  const handleClick = () => {
-    hotelService.setValue((val) => val + 1);
+  const changeValue = () => {
+    setValue(Math.random() * 100);
   };
 
-  console.log('222');
+  const changeName = () => {
+    setName((Math.random() * 100).toFixed(2));
+  };
+
+  console.log('222')
   return (
     <div>
       <div>酒店基本信息</div>
-      <Button onClick={handleClick}>修改value</Button>
-      <HotelOtherInfo />
+      <Button onClick={changeValue}>修改value</Button>
+      <Button onClick={changeName}>修改name</Button>
       <Link to="/homepage">homepage</Link>
+      <HotelOtherInfo />
+      <HotelMetaInfo />
     </div>
   );
 };
-export default memo(HotelInfo);

src/pages/hotel/HotelMetaInfo/index.tsx

@@ -0,0 +1,13 @@
+import React, { useContext, useMemo } from 'react';
+import { HotelStateContext } from '../useHotelService';
+
+export default function HotelMetaInfo() {
+  const {name} = useContext(HotelStateContext);
+
+  console.log('444')
+  return useMemo(() => (
+    <div>
+      name: {name}
+    </div>
+  ), [name]);
+};

src/pages/hotel/HotelOtherInfo/index.tsx

@@ -1,9 +1,10 @@
-import React, { memo, useContext } from 'react';
-import { HotelContext } from '../useHotelService';
+import React, { useContext, useMemo } from 'react';
+import { HotelStateContext } from '../useHotelService';
 
-const HotelOtherInfo = () => {
-  const hotelService = useContext(HotelContext);
-  return <div>其他信息：{hotelService.value}</div>;
+export default function HotelOtherInfo() {
+  const {value} = useContext(HotelStateContext);
+
+  console.log('333')
+  return useMemo(() => (<div>value：{value}</div>), [value]);
 };
 
-export default memo(HotelOtherInfo);

src/pages/hotel/index.tsx

@@ -1,10 +1,18 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { IRouteComponentProps } from 'umi';
 
-import useHotelService, { HotelContext } from './useHotelService';
+import useHotelService, { HotelDispatchContext, HotelStateContext } from './useHotelService';
 
 export default function Hotel(props: IRouteComponentProps) {
-  const hotelService = useHotelService();
+  const {setValue, setName, value, name} = useHotelService();
 
-  return <HotelContext.Provider value={hotelService}>{props.children}</HotelContext.Provider>;
+  const dispatchValues = useMemo(() => ({setValue, setName}), [setValue, setName]);
+
+  const stateValues = useMemo(() => ({ value, name }), [value, name]);
+
+  return <HotelDispatchContext.Provider value={dispatchValues}>
+    <HotelStateContext.Provider value={stateValues}>
+    {props.children}
+    </HotelStateContext.Provider>
+  </HotelDispatchContext.Provider>;
 }

src/pages/hotel/useHotelService.ts

@@ -1,13 +1,27 @@
+import { useCallback, useState } from 'react';
 import getContextService from '@/utils/getContextService';
-import { useState } from 'react';
 
 export default function useHotelService() {
   const [value, setValue] = useState(0);
+  const [name, setName] = useState('');
+
+  const changeValue = useCallback((val: number) => {
+    setValue(val);
+  }, []);
+
+  const changeName = useCallback((name: string) => {
+    setName(name);
+  }, []);
 
   return {
     value,
-    setValue,
+    name,
+    setValue: changeValue,
+    setName: changeName,
   };
 }
 
-export const HotelContext = getContextService(useHotelService);
+type ServiceReturnType = ReturnType<typeof useHotelService>;
+
+export const HotelDispatchContext = getContextService<DispatchContext<ServiceReturnType>>();
+export const HotelStateContext = getContextService<StateContext<ServiceReturnType>>();

src/utils/getContextService.ts

@@ -9,8 +9,7 @@ import { createContext } from 'react';
  * @returns
  */
 export default function getContextService<T>(
-  _: (...args: any) => T,
   initialData: T | undefined = undefined,
 ) {
-  return createContext(initialData as T);
+  return createContext<T>(initialData as T);
 }