perf(components): 为字典组件添加全局缓存机制
- 在 Cascader Dictionary 组件中添加 Map 缓存 - 在 LeftTree Department Gwj 组件中添加 Map 缓存 - 新增 Dictionary LeftTree 组件并实现缓存功能 - 在 Select Dictionary 组件中添加 Map 缓存 - 在 SelectTree Dictionary 组件中添加 Map 缓存 - 使用 JSON.stringify 生成缓存键避免重复请求 - 实现缓存命中直接返回数据提升性能master
parent
fcc02cbdcf
commit
5073124113
|
|
@ -3,6 +3,9 @@ import { useEffect, useState } from "react";
|
||||||
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
|
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
|
||||||
import BasicCascader from "../Basic";
|
import BasicCascader from "../Basic";
|
||||||
|
|
||||||
|
// 全局缓存
|
||||||
|
const cacheMap = new Map();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 数据字典级联组件
|
* 数据字典级联组件
|
||||||
*/
|
*/
|
||||||
|
|
@ -30,7 +33,20 @@ function DictionaryCascader(props) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 生成缓存键
|
||||||
|
const cacheKey = JSON.stringify({ appKey, dictValue });
|
||||||
|
|
||||||
|
// 检查缓存,如果存在直接返回缓存结果
|
||||||
|
if (cacheMap.has(cacheKey)) {
|
||||||
|
setTreeData(cacheMap.get(cacheKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
||||||
|
|
||||||
|
// 存入缓存
|
||||||
|
cacheMap.set(cacheKey, data);
|
||||||
|
|
||||||
setTreeData(data);
|
setTreeData(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,9 @@ import { request } from "@cqsjjb/jjb-common-lib/http.js";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import BasicLeftTree from "../../Basic";
|
import BasicLeftTree from "../../Basic";
|
||||||
|
|
||||||
|
// 全局缓存
|
||||||
|
const cacheMap = new Map();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 部门左侧树组件(港务局版本)
|
* 部门左侧树组件(港务局版本)
|
||||||
*/
|
*/
|
||||||
|
|
@ -15,6 +18,18 @@ function DepartmentLeftTree(props) {
|
||||||
const [treeData, setTreeData] = useState([]);
|
const [treeData, setTreeData] = useState([]);
|
||||||
|
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
|
setTreeData([]);
|
||||||
|
|
||||||
|
// 生成缓存键
|
||||||
|
const paramsStr = JSON.stringify(params);
|
||||||
|
const cacheKey = `${searchType}_${paramsStr}`;
|
||||||
|
|
||||||
|
// 检查缓存,如果存在直接返回缓存结果
|
||||||
|
if (cacheMap.has(cacheKey)) {
|
||||||
|
setTreeData(cacheMap.get(cacheKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
let requestUrl = "";
|
let requestUrl = "";
|
||||||
const actualParams = { ...params, time: new Date().getTime() };
|
const actualParams = { ...params, time: new Date().getTime() };
|
||||||
if (searchType === "current") {
|
if (searchType === "current") {
|
||||||
|
|
@ -39,6 +54,10 @@ function DepartmentLeftTree(props) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const { data } = await request(requestUrl, "post", actualParams);
|
const { data } = await request(requestUrl, "post", actualParams);
|
||||||
|
|
||||||
|
// 存入缓存
|
||||||
|
cacheMap.set(cacheKey, data);
|
||||||
|
|
||||||
setTreeData(data);
|
setTreeData(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,9 @@ import { useEffect, useState } from "react";
|
||||||
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
|
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
|
||||||
import BasicLeftTree from "../Basic";
|
import BasicLeftTree from "../Basic";
|
||||||
|
|
||||||
|
// 全局缓存
|
||||||
|
const cacheMap = new Map();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 数据字典左侧树组件
|
* 数据字典左侧树组件
|
||||||
*/
|
*/
|
||||||
|
|
@ -30,7 +33,20 @@ function DictionaryLeftTree(props) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 生成缓存键
|
||||||
|
const cacheKey = JSON.stringify({ appKey, dictValue });
|
||||||
|
|
||||||
|
// 检查缓存,如果存在直接返回缓存结果
|
||||||
|
if (cacheMap.has(cacheKey)) {
|
||||||
|
setTreeData(cacheMap.get(cacheKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
||||||
|
|
||||||
|
// 存入缓存
|
||||||
|
cacheMap.set(cacheKey, data);
|
||||||
|
|
||||||
setTreeData(data);
|
setTreeData(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,9 @@ import { useEffect, useState } from "react";
|
||||||
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
|
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
|
||||||
import BasicSelect from "../Basic";
|
import BasicSelect from "../Basic";
|
||||||
|
|
||||||
|
// 全局缓存
|
||||||
|
const cacheMap = new Map();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 数据字典下拉组件
|
* 数据字典下拉组件
|
||||||
*/
|
*/
|
||||||
|
|
@ -30,7 +33,20 @@ function DictionarySelect(props) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 生成缓存键
|
||||||
|
const cacheKey = JSON.stringify({ appKey, dictValue });
|
||||||
|
|
||||||
|
// 检查缓存,如果存在直接返回缓存结果
|
||||||
|
if (cacheMap.has(cacheKey)) {
|
||||||
|
setData(cacheMap.get(cacheKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
||||||
|
|
||||||
|
// 存入缓存
|
||||||
|
cacheMap.set(cacheKey, data);
|
||||||
|
|
||||||
setData(data);
|
setData(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,9 @@ import { useEffect, useState } from "react";
|
||||||
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
|
import { DICTIONARY_APP_KEY_ENUM } from "../../../enum/dictionary";
|
||||||
import BasicSelectTree from "../Basic";
|
import BasicSelectTree from "../Basic";
|
||||||
|
|
||||||
|
// 全局缓存
|
||||||
|
const cacheMap = new Map();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 数据字典下拉树组件
|
* 数据字典下拉树组件
|
||||||
*/
|
*/
|
||||||
|
|
@ -30,7 +33,20 @@ function DictionarySelectTree(props) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 生成缓存键
|
||||||
|
const cacheKey = JSON.stringify({ appKey, dictValue });
|
||||||
|
|
||||||
|
// 检查缓存,如果存在直接返回缓存结果
|
||||||
|
if (cacheMap.has(cacheKey)) {
|
||||||
|
setTreeData(cacheMap.get(cacheKey));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
const { data } = await request("/config/dict-trees/list/by/dictValues", "get", { appKey, dictValue });
|
||||||
|
|
||||||
|
// 存入缓存
|
||||||
|
cacheMap.set(cacheKey, data);
|
||||||
|
|
||||||
setTreeData(data);
|
setTreeData(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue