Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f588333

Browse files
Merge pull request #1147 from lowcoder-org/minimize-rerendering
Minimize rerendering
2 parents 1e3d6a6 + 0bf1805 commit f588333

File tree

19 files changed

+438
-251
lines changed

19 files changed

+438
-251
lines changed

‎client/packages/lowcoder/src/components/PermissionDialog/AppPermissionDialog.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { SHARE_TITLE } from "../../constants/apiConstants";
3131
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
3232
import { default as Divider } from "antd/es/divider";
3333

34-
export const AppPermissionDialog = (props: {
34+
export const AppPermissionDialog = React.memo((props: {
3535
applicationId: string;
3636
visible: boolean;
3737
onVisibleChange: (visible: boolean) => void;
@@ -148,7 +148,7 @@ export const AppPermissionDialog = (props: {
148148
}
149149
/>
150150
);
151-
};
151+
});
152152

153153
const InviteInputBtn = styled.div`
154154
display: flex;

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
DEFAULT_GRID_COLUMNS,
2525
DEFAULT_ROW_HEIGHT,
2626
} from "layout/calculateUtils";
27-
import _ from "lodash";
27+
import _,{isEqual} from "lodash";
2828
import {
2929
ActionExtraInfo,
3030
changeChildAction,
@@ -313,7 +313,7 @@ const ItemWrapper = styled.div<{ $disableInteract?: boolean }>`
313313
pointer-events: ${(props) => (props.$disableInteract ? "none" : "unset")};
314314
`;
315315

316-
const GridItemWrapper = React.forwardRef(
316+
const GridItemWrapper = React.memo(React.forwardRef(
317317
(
318318
props: React.PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
319319
ref: React.ForwardedRef<HTMLDivElement>
@@ -326,11 +326,11 @@ const GridItemWrapper = React.forwardRef(
326326
</ItemWrapper>
327327
);
328328
}
329-
);
329+
));
330330

331331
type GirdItemViewRecord = Record<string, GridItem>;
332332

333-
export function InnerGrid(props: ViewPropsWithSelect) {
333+
export const InnerGrid=React.memo((props: ViewPropsWithSelect)=> {
334334
const {
335335
positionParams,
336336
rowCount = Infinity,
@@ -348,11 +348,13 @@ export function InnerGrid(props: ViewPropsWithSelect) {
348348

349349
// Falk: TODO: Here we can define the inner grid columns dynamically
350350
//Added By Aqib Mirza
351-
const defaultGrid =
352-
horizontalGridCells ||
351+
const defaultGrid =useMemo(()=>{
352+
returnhorizontalGridCells ||
353353
currentTheme?.gridColumns ||
354354
defaultTheme?.gridColumns ||
355355
"12";
356+
}, [horizontalGridCells, currentTheme?.gridColumns, defaultTheme?.gridColumns]);
357+
356358
/////////////////////
357359
const isDroppable =
358360
useContext(IsDroppable) && (_.isNil(props.isDroppable) || props.isDroppable) && !readOnly;
@@ -385,7 +387,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
385387

386388
const canAddSelect = useMemo(
387389
() => _.size(containerSelectNames) === _.size(editorState.selectedCompNames),
388-
[containerSelectNames, editorState]
390+
[containerSelectNames, editorState.selectedCompNames]
389391
);
390392

391393
const dispatchPositionParamsTimerRef = useRef(0);
@@ -432,16 +434,21 @@ export function InnerGrid(props: ViewPropsWithSelect) {
432434
onPositionParamsChange,
433435
onRowCountChange,
434436
positionParams,
435-
props,
437+
props.dispatch,
438+
props.containerPadding,
436439
]
437440
);
438441
const setSelectedNames = useCallback(
439442
(names: Set<string>) => {
440443
editorState.setSelectedCompNames(names);
441444
},
442-
[editorState]
445+
[editorState.setSelectedCompNames]
443446
);
444-
const { width, ref } = useResizeDetector({ onResize, handleHeight: isRowCountLocked });
447+
448+
const { width, ref } = useResizeDetector({
449+
onResize,
450+
handleHeight: isRowCountLocked,
451+
});
445452

446453
const itemViewRef = useRef<GirdItemViewRecord>({});
447454
const itemViews = useMemo(() => {
@@ -464,9 +471,10 @@ export function InnerGrid(props: ViewPropsWithSelect) {
464471
const clickItem = useCallback(
465472
(
466473
e: React.MouseEvent<HTMLDivElement,
467-
globalThis.MouseEvent>, name: string
474+
globalThis.MouseEvent>,
475+
name: string,
468476
) => selectItem(e, name, canAddSelect, containerSelectNames, setSelectedNames),
469-
[canAddSelect, containerSelectNames, setSelectedNames]
477+
[selectItem,canAddSelect, containerSelectNames, setSelectedNames]
470478
);
471479

472480
useEffect(() => {
@@ -555,7 +563,9 @@ export function InnerGrid(props: ViewPropsWithSelect) {
555563
{itemViews}
556564
</ReactGridLayout>
557565
);
558-
}
566+
}, (prevProps, newProps) => {
567+
return isEqual(prevProps, newProps);
568+
});
559569

560570
function selectItem(
561571
e: MouseEvent<HTMLDivElement>,

‎client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { EditorContext } from "comps/editorState";
22
import { EditorContainer } from "pages/common/styledComponent";
3-
import { Profiler, useContext, useRef, useState } from "react";
3+
import React,{ Profiler, useContext, useRef, useState } from "react";
44
import styled from "styled-components";
55
import { profilerCallback } from "util/cacheUtils";
66
import {
@@ -20,6 +20,7 @@ import { CanvasContainerID } from "constants/domLocators";
2020
import { CNRootContainer } from "constants/styleSelectors";
2121
import { ScrollBar } from "lowcoder-design";
2222
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
23+
import { isEqual } from "lodash";
2324

2425
// min-height: 100vh;
2526

@@ -72,7 +73,7 @@ function getDragSelectedNames(
7273

7374
const EmptySet = new Set<string>();
7475

75-
export function CanvasView(props: ContainerBaseProps) {
76+
export const CanvasView=React.memo((props: ContainerBaseProps)=> {
7677
const editorState = useContext(EditorContext);
7778
const [dragSelectedComps, setDragSelectedComp] = useState(EmptySet);
7879
const scrollContainerRef = useRef(null);
@@ -166,4 +167,6 @@ export function CanvasView(props: ContainerBaseProps) {
166167
</EditorContainer>
167168
</CanvasContainer>
168169
);
169-
}
170+
}, (prevProps, newProps) => {
171+
return isEqual(prevProps, newProps);
172+
});

‎client/packages/lowcoder/src/comps/comps/gridLayoutComp/dragSelector.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const InitialState = {
3838
startPoint: undefined,
3939
};
4040

41-
exportclass DragSelector extends React.Component<SectionProps, SectionState> {
41+
class DragSelectorComp extends React.Component<SectionProps, SectionState> {
4242
private readonly selectAreaRef: React.RefObject<HTMLDivElement>;
4343

4444
constructor(props: SectionProps) {
@@ -178,3 +178,5 @@ export class DragSelector extends React.Component<SectionProps, SectionState> {
178178
};
179179
}
180180
}
181+
182+
export const DragSelector = React.memo(DragSelectorComp);

‎client/packages/lowcoder/src/comps/comps/rootComp.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ import {
3232
import RefTreeComp from "./refTreeComp";
3333
import { ExternalEditorContext } from "util/context/ExternalEditorContext";
3434
import { useUserViewMode } from "util/hooks";
35+
import React from "react";
36+
import { isEqual } from "lodash";
3537

3638
const EditorView = lazy(
3739
() => import("pages/editor/editorView"),
@@ -55,7 +57,7 @@ const childrenMap = {
5557
preload: PreloadComp,
5658
};
5759

58-
function RootView(props: RootViewProps) {
60+
const RootView=React.memo((props: RootViewProps)=> {
5961
const previewTheme = useContext(ThemeContext);
6062
const { comp, isModuleRoot, ...divProps } = props;
6163
const [editorState, setEditorState] = useState<EditorState>();
@@ -143,7 +145,9 @@ function RootView(props: RootViewProps) {
143145
</PropertySectionContext.Provider>
144146
</div>
145147
);
146-
}
148+
}, (prevProps, nextProps) => {
149+
return isEqual(prevProps, nextProps);
150+
});
147151

148152
/**
149153
* Root Comp

‎client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,10 @@ export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
4444
version: InstanceType<typeof StringControl>;
4545
};
4646

47-
export function HidableView(props: {
47+
export const HidableView=React.memo((props: {
4848
children: JSX.Element | React.ReactNode;
4949
hidden: boolean;
50-
}) {
50+
}) =>{
5151
const { readOnly } = useContext(ExternalEditorContext);
5252
if (readOnly) {
5353
return <>{props.children}</>;
@@ -64,15 +64,15 @@ export function HidableView(props: {
6464
</>
6565
);
6666
}
67-
}
67+
})
6868

69-
export function ExtendedPropertyView<
69+
export const ExtendedPropertyView=React.memo(<
7070
ChildrenCompMap extends Record<string, Comp<unknown>>,
7171
>(props: {
7272
children: JSX.Element | React.ReactNode,
7373
childrenMap: NewChildren<ChildrenCompMap>
7474
}
75-
) {
75+
) =>{
7676
const [compVersions, setCompVersions] = useState(['latest']);
7777
const [compName, setCompName] = useState('');
7878
const editorState = useContext(EditorContext);
@@ -129,7 +129,7 @@ export function ExtendedPropertyView<
129129
)}
130130
</>
131131
);
132-
}
132+
});
133133

134134
export function uiChildren<
135135
ChildrenCompMap extends Record<string, Comp<unknown>>,
@@ -275,11 +275,11 @@ export const DisabledContext = React.createContext<boolean>(false);
275275
/**
276276
* Guaranteed to be in a react component, so that react hooks can be used internally
277277
*/
278-
function UIView(props: {
278+
const UIView=React.memo((props: {
279279
innerRef: React.RefObject<HTMLDivElement>;
280280
comp: any;
281281
viewFn: any;
282-
}) {
282+
}) =>{
283283
const comp = props.comp;
284284
const childrenProps = childrenToProps(comp.children);
285285
const childrenJsonProps = comp.toJsonValue();
@@ -397,13 +397,12 @@ function UIView(props: {
397397
width: '100%',
398398
height: '100%',
399399
margin: '0px',
400-
padding:getPadding()
401-
400+
padding: getPadding()
402401
}}
403402
>
404403
<HidableView hidden={childrenProps.hidden as boolean}>
405404
{props.viewFn(childrenProps, comp.dispatch)}
406405
</HidableView>
407406
</div>
408407
);
409-
}
408+
});

‎client/packages/lowcoder/src/index.sdk.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@ import * as styledNameExports from "styled-components";
66
import styledDefault from "styled-components";
77
export * as styledm from "styled-components";
88
export * from "comps/comps/containerBase/containerCompBuilder";
9+
export * from "comps/comps/containerBase/iContainer";
10+
export * from "comps/comps/containerBase/utils";
11+
export * from "comps/comps/containerBase/simpleContainerComp";
912
export * from "comps/utils/backgroundColorContext";
1013
export { getData } from "comps/comps/listViewComp/listViewUtils";
1114
export { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
15+
export type { ContainerBaseProps } from "comps/comps/containerComp/containerView";
1216

1317
export { Layers } from "constants/Layers";
1418
export * from "comps/controls/eventHandlerControl";
@@ -97,6 +101,7 @@ export * from "comps/controls/simpleStringControl";
97101
export * from "comps/controls/stringSimpleControl";
98102
export * from "comps/controls/styleControl";
99103
export * from "comps/controls/styleControlConstants";
104+
export * from "comps/controls/slotControl";
100105

101106
// generators
102107
export * from "comps/generators/changeDataType";
@@ -114,6 +119,7 @@ export * from "comps/generators/withExposing";
114119
export * from "comps/generators/withIsLoading";
115120
export * from "comps/generators/withMethodExposing";
116121
export * from "comps/generators/withType";
122+
export * from "comps/generators/controlCompBuilder";
117123

118124
export * from "appView/bootstrapAt";
119125
export * from "appView/LowcoderAppView";

‎client/packages/lowcoder/src/layout/compSelectionWrapper.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ const HiddenIcon = styled(CloseEyeIcon)`
231231
}
232232
`;
233233

234-
export const CompSelectionWrapper = (props: {
234+
export const CompSelectionWrapper = React.memo((props: {
235235
id?: string;
236236
compType: UICompType;
237237
className?: string;
@@ -376,4 +376,4 @@ export const CompSelectionWrapper = (props: {
376376
</SelectableDiv>
377377
</div>
378378
);
379-
};
379+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /