Movatterモバイル変換

[0]ホーム
URL:

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

Commit5b45716

Browse files
added memoization
1 parentd91fe66 commit5b45716

File tree

8 files changed

+293
-148
lines changed

8 files changed

+293
-148
lines changed

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

Lines changed: 19 additions & 11 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-
constGridItemWrapper=React.forwardRef(
316+
constGridItemWrapper=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
typeGirdItemViewRecord=Record<string,GridItem>;
332332

333-
exportfunctionInnerGrid(props:ViewPropsWithSelect){
333+
exportconstInnerGrid=React.memo((props:ViewPropsWithSelect)=>{
334334
const{
335335
positionParams,
336336
rowCount=Infinity,
@@ -385,7 +385,7 @@ export function InnerGrid(props: ViewPropsWithSelect) {
385385

386386
constcanAddSelect=useMemo(
387387
()=>_.size(containerSelectNames)===_.size(editorState.selectedCompNames),
388-
[containerSelectNames,editorState]
388+
[containerSelectNames,editorState.selectedCompNames]
389389
);
390390

391391
constdispatchPositionParamsTimerRef=useRef(0);
@@ -432,16 +432,21 @@ export function InnerGrid(props: ViewPropsWithSelect) {
432432
onPositionParamsChange,
433433
onRowCountChange,
434434
positionParams,
435-
props,
435+
props.dispatch,
436+
props.containerPadding,
436437
]
437438
);
438439
constsetSelectedNames=useCallback(
439440
(names:Set<string>)=>{
440441
editorState.setSelectedCompNames(names);
441442
},
442-
[editorState]
443+
[editorState.setSelectedCompNames]
443444
);
444-
const{ width, ref}=useResizeDetector({ onResize,handleHeight:isRowCountLocked});
445+
446+
const{ width, ref}=useResizeDetector({
447+
onResize,
448+
handleHeight:isRowCountLocked,
449+
});
445450

446451
constitemViewRef=useRef<GirdItemViewRecord>({});
447452
constitemViews=useMemo(()=>{
@@ -464,9 +469,10 @@ export function InnerGrid(props: ViewPropsWithSelect) {
464469
constclickItem=useCallback(
465470
(
466471
e:React.MouseEvent<HTMLDivElement,
467-
globalThis.MouseEvent>,name:string
472+
globalThis.MouseEvent>,
473+
name:string,
468474
)=>selectItem(e,name,canAddSelect,containerSelectNames,setSelectedNames),
469-
[canAddSelect,containerSelectNames,setSelectedNames]
475+
[selectItem,canAddSelect,containerSelectNames,setSelectedNames]
470476
);
471477

472478
useEffect(()=>{
@@ -555,7 +561,9 @@ export function InnerGrid(props: ViewPropsWithSelect) {
555561
{itemViews}
556562
</ReactGridLayout>
557563
);
558-
}
564+
},(prevProps,newProps)=>{
565+
returnisEqual(prevProps,newProps);
566+
});
559567

560568
functionselectItem(
561569
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+
importReact,{Profiler,useContext,useRef,useState}from"react";
44
importstyledfrom"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
constEmptySet=newSet<string>();
7475

75-
exportfunctionCanvasView(props:ContainerBaseProps){
76+
exportconstCanvasView=React.memo((props:ContainerBaseProps)=>{
7677
consteditorState=useContext(EditorContext);
7778
const[dragSelectedComps,setDragSelectedComp]=useState(EmptySet);
7879
constscrollContainerRef=useRef(null);
@@ -166,4 +167,6 @@ export function CanvasView(props: ContainerBaseProps) {
166167
</EditorContainer>
167168
</CanvasContainer>
168169
);
169-
}
170+
},(prevProps,newProps)=>{
171+
returnisEqual(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-
exportclassDragSelectorextendsReact.Component<SectionProps,SectionState>{
41+
classDragSelectorCompextendsReact.Component<SectionProps,SectionState>{
4242
privatereadonlyselectAreaRef: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+
exportconstDragSelector=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
importRefTreeCompfrom"./refTreeComp";
3333
import{ExternalEditorContext}from"util/context/ExternalEditorContext";
3434
import{useUserViewMode}from"util/hooks";
35+
importReactfrom"react";
36+
import{isEqual}from"lodash";
3537

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

58-
functionRootView(props:RootViewProps){
60+
constRootView=React.memo((props:RootViewProps)=>{
5961
constpreviewTheme=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+
returnisEqual(prevProps,nextProps);
150+
});
147151

148152
/**
149153
* Root Comp

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp