Tab物料的slot组件总是重新加载当修改prop时。

レポートに示されているスキーマで、tabs prop の setValue 関数とその node.children.mergeChildren 呼び出しから始めます。大きな slot コンポーネントを使って tab prop の変更を再現し、なぜ slot が再マウントされるのかを追跡します。完了条件は、tab prop を変更しても既存の slot の内容が再読み込みされなくなることです。

每次修改tab prop时(这个属性有个setValue会更新children的值)，tab children slot里的组件总是remount。当slot组件大时就会导致设计页面卡顿。希望有一种方法能让slot不重复加载。
下面是tab的schema配置。

{
      "componentName": "ColorfulTab",
      "title": "选项卡",
      "category": "布局容器类",
      "group": "高级组件",
      "configure": {
        "props": [
          {
            "name": "tabs",
            "title": "标签项",
            "setter": {
              "componentName": "EventEditSetterRefactor",
              "props": {
                "placeholder": "请输入标签名"
              }
            },
            "extraProps": {
              "display": "accordion",
              "getValue": {
                "type": "JSFunction",
                "value": "function getValue(target) {\n          const map = target.node.children.map((child) => {\n            const key = child.getPropValue('key') ? String(child.getPropValue('key')) : child.id;\n  const buttonConfig = child.getPropValue('buttonConfig') ? child.getPropValue('buttonConfig') : { \n funcShow: {}, functional: {}, tooltip: {}, btnStyle: {}, fontStyle: {}, \n };           return {\n              key,\n               title: child.getPropValue('tab'),\n  buttonConfig          };\n          });\n          return map;\n        }"
              },
              "setValue": {
                "type": "JSFunction",
                "value": "function setValue(target, value) {\n          const { node } = target;\n          const map = {};\n\n          if (!Array.isArray(value)) {\n            value = [];\n          }\n console.info('value node', value);         value.forEach((item) => {\n            const tabItem = Object.assign({}, item);\n            map[item.key] = tabItem;\n          });\n\n          node.children.mergeChildren(\n            (child) => {\n       const children = child.getPropValue('children') || {type: 'JSSlot', params: undefined, value: undefined, title: undefined, name: undefined}; child.setPropValue('children', children); const key = String(child.getPropValue('key') || child.id);\n              if (Object.hasOwnProperty.call(map, key)) {\n                child.setPropValue('tab', map[key].tab || map[key].title);child.setPropValue('title', map[key].tab || map[key].title);\n     console.info('node key', key);           delete map[key];\n                return false;\n              }\n              return true;\n            },\n            (children) => {\n              const items = [];\nconsole.info('child 1', children, map);              for (const key in map) {\n                if (Object.hasOwnProperty.call(map, key)) {\n                  items.push({\n                    componentName: 'ColorfulTabPane',\n                    props: map[key],\n                  });\n                }\n              }\n              return items;\n            },\n            (child1, child2) => {\n              const a = value.findIndex(\n                (item) => String(item.key) === String(child1.getPropValue('key') || child1.id),\n              );\n              const b = value.findIndex(\n                (item) => String(item.key) === String(child2.getPropValue('key') || child2.id),\n              );\n console.info('node sorter');             return a - b;\n            },\n          );\n        }"
              }
            }
          },
          
        "component": {
          "isContainer": true,
          "nestingRule": {
            "childWhitelist": [
              "ColorfulTabPane"
            ]
          }
        },
        "advanced": {
          "initialChildren": [
            {
              "componentName": "ColorfulTabPane",
              "props": {
                "key": "node_01",
                "tab": "Item 1",
                "title": "Item 1",
                "children": {
                  "type": "JSSlot",
                  "value": []
                }
              }
            },
            {
              "componentName": "ColorfulTabPane",
              "props": {
                "key": "node_02",
                "tab": "Item 2",
                "title": "Item 2",
                "children": {
                  "type": "JSSlot",
                  "value": []
                }
              }
            },
            {
              "componentName": "ColorfulTabPane",
              "props": {
                "key": "node_03",
                "tab": "Item 3",
                "title": "Item 2",
                "children": {
                  "type": "JSSlot",
                  "value": []
                }
              }
            }
          ]
        },
        "supports": {
          "style": true
        }
      },
      
    },
`