perf: 优化图片库加载

src/app.js

@@ -18,6 +18,7 @@ import configureStore from './configureStore';
 import App from './containers/App';
 import history from './utils/history';
 import config from './routes/config';
+import { PictureWallProvider } from '@/components/Upload/context';
 const initialState = Immutable.Map();
 const store = configureStore(initialState, history);
 const MOUNT_NODE = document.getElementById('app');
@@ -27,7 +28,9 @@ const render = () => {
     <Provider store={store}>
       <ConnectedRouter history={history}>
         <ConfigProvider locale={zhCN}>
-          <App routesConfig={config} />
+          <PictureWallProvider>
+            <App routesConfig={config} />
+          </PictureWallProvider>
         </ConfigProvider>
       </ConnectedRouter>
     </Provider>,

src/components/Upload/context.js

+import { getImageBases } from '@/services/common/api';
+import React, { useEffect, useState } from 'react';
+const UploadContext = React.createContext();
+
+const PictureWallProvider = props => {
+  const { children, ...rest } = props;
+  const [imgBed, setImgBed] = useState([]);
+
+  const update = () => {
+    getImageBases('').then(res => {
+      if (res.code === 0) {
+        setImgBed(res.data);
+      }
+    });
+  };
+
+  useEffect(() => {
+    update();
+  }, []);
+
+  return (
+    <UploadContext.Provider value={{ imgBed, update }}>
+      {children}
+    </UploadContext.Provider>
+  );
+};
+
+export { UploadContext as default, PictureWallProvider };

src/components/Upload/index.tsx

@@ -8,6 +8,7 @@ import { uuid } from '@/utils/tools';
 import { get, PUBLISH_SERVICE } from '@/services';
 import styles from './index.less';
 import { getImageBases } from '@/services/common/api';
+import UploadContext from './context.js'
 
 const { TabPane } = Tabs;
 
@@ -17,6 +18,12 @@ const wallCateName: any = {
   bg: '背景',
   uploaded: '上传',
 };
+const tabNames:any = {
+  CityTemp: '用户上传',
+  icon: '图标',
+  androidMenu: '安卓图标',
+  menuNew: '应用图标'
+}
 
 function getBase64(file: File | Blob) {
   return new Promise<string>((resolve, reject) => {
@@ -38,6 +45,7 @@ interface PicturesWallType {
   isCrop?: boolean;
   type?: 'CityTemp'|'icon'|'androidMenu'|'menuNew',
   value?: string | string[],
+  uploadContext: any,
 }
 
 class PicturesWall extends React.Component<PicturesWallType> {
@@ -46,7 +54,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
     previewImage: '',
     wallModalVisible: false,
     previewTitle: '',
-    imgBed: [],
+    imgBed: this.props.uploadContext?.imgBed || [],
     curSelectedImg: '',
     prevProps:{},
     fileList: this.props.value ? Array.isArray(this.props.value) ? this.props.value.map((v) => ({
@@ -63,24 +71,32 @@ class PicturesWall extends React.Component<PicturesWallType> {
   }; 
 
   static getDerivedStateFromProps = (props, state) => {
+    const {value, uploadContext = {}} = props;
+    const { imgBed, update } = uploadContext;
     const fileList = state.fileList;
-    const shouldUpdate = props.value && fileList.every(f => Array.isArray(props.value) ? !props.value.some(v => f.url === v) : f.url !== props.value)
-    if(props.value !== state.prevProps.value && shouldUpdate){
+    const shouldUpdate = value && fileList.every(f => Array.isArray(value) ? !value.some(v => f.url === v) : f.url !== value)
+    if(value !== state.prevProps.value && shouldUpdate){
       return {
-        provProps: props,
-        fileList:  Array.isArray(props.value) ? props.value.map((v) => ({
+        prevProps: props,
+        fileList:  Array.isArray(value) ? value.map((v) => ({
           url: v,
           uid: uuid(8, 16),
           name: '熊猫运维中台系统',
           status: 'done',
         })) as UploadFile<any>[]: [{
-          url: props.value,
+          url: value,
           uid: uuid(8, 16),
           name: '熊猫运维中台系统',
           status: 'done',
         }] as UploadFile<any>[]
       }
     }
+    if(imgBed != state.prevProps.uploadContext?.imgBed){
+      return {
+        prevProps: props,
+        imgBed
+      }
+    }
     return {
       prevProps: props
     };
@@ -153,16 +169,17 @@ class PicturesWall extends React.Component<PicturesWallType> {
   };
 
   handleChange = ({ file, fileList }: UploadChangeParam<UploadFile<any>>) => {
-    const { maxLen = 1 } = this.props;
+    const { maxLen = 1, uploadContext } = this.props;
     this.setState({ fileList });
     if (file.status === 'done') {
       const files = fileList.map(item => {
-        const { status, data, name, thumbUrl } = item;
+        const { status, name, thumbUrl } = item;
         const url =  item.response && item.response.data || thumbUrl ;
         return { uid: uuid(8, 16), name, status, url };
       });
       this.setState({fileList: files})
       this.props.onChange && this.props.onChange( maxLen === 1 ? files[0].url : files.map(f => f.url));
+      uploadContext?.update && uploadContext.update()
     }
   };
 
@@ -182,14 +199,14 @@ class PicturesWall extends React.Component<PicturesWallType> {
     return isJpgOrPng && isLt2M;
   };
 
-  componentDidMount() {
-    const { type = ''} = this.props;
-    getImageBases(type).then(res => {
-      if(res.code === 0){
-        this.setState({imgBed: res.data})
-      }
-    })
-  }
+  // componentDidMount() {
+  //   const { type = ''} = this.props;
+  //   getImageBases(type).then(res => {
+  //     if(res.code === 0){
+  //       this.setState({imgBed: res.data})
+  //     }
+  //   })
+  // }
 
   getImageUrl(path){
     if(path&&path.indexOf('http') === 0){
@@ -302,7 +319,7 @@ class PicturesWall extends React.Component<PicturesWallType> {
           <Tabs defaultActiveKey={imgBed[0]?.moduleName} tabPosition="left" style={{ height: 520 }}>
             {imgBed.map((item, i) => {
               return (
-                <TabPane tab={item.moduleName} key={item.moduleName}>
+                <TabPane tab={tabNames[item.moduleName]} key={item.moduleName}>
                   <div className={styles.imgBox}>
                     {item.child?.map(m => m.fileUrls).flat(Infinity).map((item: string, i: number) => {
                         return (
@@ -335,4 +352,9 @@ class PicturesWall extends React.Component<PicturesWallType> {
   }
 }
 
-export default PicturesWall;
+const PicturesWallWrapper = (props: any) => {
+  return <UploadContext.Consumer>
+    {(uploadContext) => <PicturesWall {...props} uploadContext={uploadContext}/>}
+  </UploadContext.Consumer>
+}
+export default PicturesWallWrapper;