@pisell/lowcode-renderer 1.0.49 → 1.0.51

package/es/Render/index.js

@@ -17,11 +17,18 @@ import { injectComponents } from "@alilc/lowcode-plugin-inject";
 import { AssetLoader, buildComponents } from "@alilc/lowcode-utils";
 import { Skeleton } from "antd";
 import { isArray, mergeWith, cloneDeep } from "lodash-es";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import ReactRenderer from "../ReactRenderer";
 import appHelper from "../appHelper";
+import { generateUniqueIdByObj } from "@pisell/utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 var isLoadAssets = false;
+
+/**
+ * 缓存处理后的data信息 二次访问时
+ * 直接从缓存中获取
+ */
+var cacheDataMap = new Map();
 var Render = function Render(props) {
   var packages = props.packages,
     projectSchema = props.projectSchema,
@@ -30,7 +37,13 @@ var Render = function Render(props) {
     locale = props.locale,
     _props$isShowSkeleton = props.isShowSkeleton,
     isShowSkeleton = _props$isShowSkeleton === void 0 ? true : _props$isShowSkeleton;
-  var _useState = useState({}),
+  var schemaHash = useMemo(function () {
+    if (projectSchema) {
+      return generateUniqueIdByObj(projectSchema);
+    }
+    return null;
+  }, [projectSchema]);
+  var _useState = useState(schemaHash ? cacheDataMap.get(schemaHash) || {} : {}),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
     setData = _useState2[1];
@@ -52,7 +65,7 @@ var Render = function Render(props) {
     }
     function _init() {
       _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var componentsMapArray, componentsTree, i18n, projectDataSource, componentsMap, packagesMap, pageSchema, libraryMap, libraryAsset, assetLoader, components;
+        var componentsMapArray, componentsTree, i18n, projectDataSource, componentsMap, packagesMap, pageSchema, libraryMap, libraryAsset, assetLoader, components, _data;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -105,13 +118,15 @@ var Render = function Render(props) {
               return injectComponents(buildComponents(libraryMap, componentsMap));
             case 17:
               components = _context.sent;
-              setData({
+              _data = {
                 schema: pageSchema,
                 components: components,
                 i18n: i18n,
                 projectDataSource: projectDataSource
-              });
-            case 19:
+              };
+              cacheDataMap.set(schemaHash, _data);
+              setData(_data);
+            case 21:
             case "end":
               return _context.stop();
           }
@@ -129,7 +144,7 @@ var Render = function Render(props) {
     if (!schema || !components) {
       init();
     }
-  }, [data, projectSchema]);
+  }, [data, projectSchema, schemaHash]);
   if (!schema || !components) {
     if (!isShowSkeleton) {
       return null;

package/lib/Render/index.js

@@ -39,7 +39,9 @@ var import_lodash_es = require("lodash-es");
 var import_react = __toESM(require("react"));
 var import_ReactRenderer = __toESM(require("../ReactRenderer"));
 var import_appHelper = __toESM(require("../appHelper"));
+var import_utils = require("@pisell/utils");
 var isLoadAssets = false;
+var cacheDataMap = /* @__PURE__ */ new Map();
 var Render = (props) => {
   const {
     packages,
@@ -49,7 +51,15 @@ var Render = (props) => {
     locale,
     isShowSkeleton = true
   } = props;
-  const [data, setData] = (0, import_react.useState)({});
+  const schemaHash = (0, import_react.useMemo)(() => {
+    if (projectSchema) {
+      return (0, import_utils.generateUniqueIdByObj)(projectSchema);
+    }
+    return null;
+  }, [projectSchema]);
+  const [data, setData] = (0, import_react.useState)(
+    schemaHash ? cacheDataMap.get(schemaHash) || {} : {}
+  );
   const { schema, components, i18n = {}, projectDataSource = {} } = data;
   (0, import_react.useEffect)(() => {
     document.body.id = "body";
@@ -89,12 +99,14 @@ var Render = (props) => {
       const components3 = await (0, import_lowcode_plugin_inject.injectComponents)(
         (0, import_lowcode_utils.buildComponents)(libraryMap, componentsMap)
       );
-      setData({
+      const _data = {
         schema: pageSchema,
         components: components3,
         i18n: i18n3,
         projectDataSource: projectDataSource3
-      });
+      };
+      cacheDataMap.set(schemaHash, _data);
+      setData(_data);
     }
     const {
       schema: schema2,
@@ -105,7 +117,7 @@ var Render = (props) => {
     if (!schema2 || !components2) {
       init();
     }
-  }, [data, projectSchema]);
+  }, [data, projectSchema, schemaHash]);
   if (!schema || !components) {
     if (!isShowSkeleton) {
       return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/lowcode-renderer",
-  "version": "1.0.49",
+  "version": "1.0.51",
   "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./es/index.js",
@@ -18,7 +18,7 @@
     "@alifd/next": "^1.25.44",
     "lodash-es": "^4.17.21",
     "dayjs": "^1.11.9",
-    "@pisell/utils": "1.0.23"
+    "@pisell/utils": "1.0.25"
   },
   "peerDependencies": {
     "react": ">=16.9.0",