github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-06-02 13:41:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(perf): 在 iframe 卸载前, 把相关对象都销毁掉

Browse Source
This commit is contained in:
力皓 2021-05-12 14:05:04 +08:00
parent b5f93a2b6e
commit da3393a126
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/react-simulator-renderer/src/index.ts
View File

@ -6,7 +6,6 @@ if (typeof window !== 'undefined') {
window.addEventListener('beforeunload', () => { window.addEventListener('beforeunload', () => {
(window as any).LCSimulatorHost = null; (window as any).LCSimulatorHost = null;
// @ts-ignore
renderer.dispose?.(); renderer.dispose?.();
(window as any).SimulatorRenderer = null; (window as any).SimulatorRenderer = null;
(window as any).ReactDOM.unmountComponentAtNode(document.getElementById('app')); (window as any).ReactDOM.unmountComponentAtNode(document.getElementById('app'));

33
packages/react-simulator-renderer/src/renderer.ts
View File

@ -2,7 +2,7 @@ import React, { createElement, ReactInstance } from 'react';
import { render as reactRender } from 'react-dom'; import { render as reactRender } from 'react-dom';
import { host } from './host'; import { host } from './host';
import SimulatorRendererView from './renderer-view'; import SimulatorRendererView from './renderer-view';
import { computed, obx } from '@recore/obx'; import { computed, obx, untracked } from '@recore/obx';
import { getClientRects } from './utils/get-client-rects'; import { getClientRects } from './utils/get-client-rects';
import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes'; import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes';
import { import {
@ -37,13 +37,13 @@ export class DocumentInstance {
return this._schema; return this._schema;
} }
private dispose?: () => void; private disposeFunctions: Array<() => void> = [];
constructor(readonly container: SimulatorRendererContainer, readonly document: DocumentModel) { constructor(readonly container: SimulatorRendererContainer, readonly document: DocumentModel) {
this.dispose = host.autorun(() => { this.disposeFunctions.push(host.autorun(() => {
// sync schema // sync schema
this._schema = document.export(1); this._schema = document.export(1);
}); }));
} }
@obx.ref private _components: any = {}; @obx.ref private _components: any = {};
@ -180,11 +180,16 @@ export class DocumentInstance {
getNode(id: string): Node | null { getNode(id: string): Node | null {
return this.document.getNode(id); return this.document.getNode(id);
} }
dispose() {
this.disposeFunctions.forEach(fn => fn());
this.instancesMap = new Map();
}
} }
export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
readonly isSimulatorRenderer = true; readonly isSimulatorRenderer = true;
private dispose?: () => void; private disposeFunctions: Array<() => void> = [];
readonly history: MemoryHistory; readonly history: MemoryHistory;
@obx.ref private _documentInstances: DocumentInstance[] = []; @obx.ref private _documentInstances: DocumentInstance[] = [];
@ -193,7 +198,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
} }
constructor() { constructor() {
this.dispose = host.connect(this, () => { this.disposeFunctions.push(host.connect(this, () => {
// sync layout config // sync layout config
this._layout = host.project.get('config').layout; this._layout = host.project.get('config').layout;
@ -214,10 +219,10 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
// sync device // sync device
this._device = host.device; this._device = host.device;
}); }));
const documentInstanceMap = new Map<string, DocumentInstance>(); const documentInstanceMap = new Map<string, DocumentInstance>();
let initialEntry = '/'; let initialEntry = '/';
host.autorun(({ firstRun }) => { this.disposeFunctions.push(host.autorun(({ firstRun }) => {
this._documentInstances = host.project.documents.map((doc) => { this._documentInstances = host.project.documents.map((doc) => {
let inst = documentInstanceMap.get(doc.id); let inst = documentInstanceMap.get(doc.id);
if (!inst) { if (!inst) {
@ -234,7 +239,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
} else if (this.history.location.pathname !== path) { } else if (this.history.location.pathname !== path) {
this.history.replace(path); this.history.replace(path);
} }
}); }));
const history = createMemoryHistory({ const history = createMemoryHistory({
initialEntries: [initialEntry], initialEntries: [initialEntry],
}); });
@ -468,6 +473,16 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
reactRender(createElement(SimulatorRendererView, { rendererContainer: this }), container); reactRender(createElement(SimulatorRendererView, { rendererContainer: this }), container);
host.project.setRendererReady(this); host.project.setRendererReady(this);
} }
dispose() {
this.disposeFunctions.forEach(fn => fn());
this.documentInstances.forEach(docInst => docInst.dispose());
untracked(() => {
this._componentsMap = {};
this._components = null;
this._appContext = null;
});
}
} }
// Slot/Leaf and Fragment|FunctionComponent polyfill(ref) // Slot/Leaf and Fragment|FunctionComponent polyfill(ref)