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

Commitd91fe66

Browse files
memoize comps to minimize re-rendering
1 parent4b09509 commitd91fe66

File tree

10 files changed

+57
-40
lines changed

10 files changed

+57
-40
lines changed

‎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<typeofStringControl>;
4545
};
4646

47-
exportfunctionHidableView(props:{
47+
exportconstHidableView=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-
exportfunctionExtendedPropertyView<
69+
exportconstExtendedPropertyView=React.memo(<
7070
ChildrenCompMapextendsRecord<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
consteditorState=useContext(EditorContext);
@@ -129,7 +129,7 @@ export function ExtendedPropertyView<
129129
)}
130130
</>
131131
);
132-
}
132+
});
133133

134134
exportfunctionuiChildren<
135135
ChildrenCompMapextendsRecord<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-
functionUIView(props:{
278+
constUIView=React.memo((props:{
279279
innerRef:React.RefObject<HTMLDivElement>;
280280
comp:any;
281281
viewFn:any;
282-
}){
282+
})=>{
283283
constcomp=props.comp;
284284
constchildrenProps=childrenToProps(comp.children);
285285
constchildrenJsonProps=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
<HidableViewhidden={childrenProps.hiddenasboolean}>
405404
{props.viewFn(childrenProps,comp.dispatch)}
406405
</HidableView>
407406
</div>
408407
);
409-
}
408+
});

‎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-
exportconstCompSelectionWrapper=(props:{
234+
exportconstCompSelectionWrapper=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+
});

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

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import React, {
66
ReactElement,
77
SyntheticEvent,
88
useCallback,
9+
useContext,
910
useMemo,
1011
useRef,
1112
useState,
@@ -26,6 +27,7 @@ import {
2627
setTransform,
2728
}from"./utils";
2829
importstyledfrom"styled-components";
30+
import{EditorContext}from"@lowcoder-ee/comps/editorState";
2931

3032
typeGridItemCallback<DataextendsGridDragEvent|GridResizeEvent>=(
3133
i:string,
@@ -104,6 +106,7 @@ export function GridItem(props: GridItemProps) {
104106
const[resizing,setResizing]=useState<{width:number;height:number}|undefined>();
105107
const[dragging,setDragging]=useState<{top:number;left:number}|undefined>();
106108
constelementRef=useRef<HTMLDivElement>(null);
109+
consteditorState=useContext(EditorContext);
107110

108111
// record the real height of the comp content
109112
constitemHeightRef=useRef<number|undefined>(undefined);
@@ -141,14 +144,17 @@ export function GridItem(props: GridItemProps) {
141144
onDrag={onDrag}
142145
onDragEnd={onDragEnd}
143146
onMouseDown={(e)=>{
144-
e.stopPropagation();
147+
constparentContainer=editorState.findUIParentContainer(props.name!)?.toJsonValue();
145148

146149
// allow mouseDown event on lowcoder-comp-kanban to make drag/drop work
147-
if((props.compTypeasstring).includes('lowcoder-comp-kanban'))return;
150+
if(
151+
(props.compTypeasstring).includes('lowcoder-comp-kanban')
152+
||parentContainer?.compType?.includes('lowcoder-comp-kanban')
153+
)return;
148154

149155
// allow mouseDown event on lowcoder-comp-excalidraw to make drag/drop work
150156
if((props.compTypeasstring).includes('lowcoder-comp-excalidraw'))return;
151-
157+
e.stopPropagation();
152158
constevent=newMouseEvent("mousedown");
153159
document.dispatchEvent(event);
154160
}}
@@ -471,11 +477,11 @@ export function GridItem(props: GridItemProps) {
471477
returnrenderResult;
472478
}
473479

474-
GridItem.defaultProps={
475-
className:"",
476-
minH:1,
477-
minW:1,
478-
maxH:Infinity,
479-
maxW:Infinity,
480-
transformScale:1,
481-
};
480+
//GridItem.defaultProps = {
481+
// className: "",
482+
// minH: 1,
483+
// minW: 1,
484+
// maxH: Infinity,
485+
// maxW: Infinity,
486+
// transformScale: 1,
487+
//};

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -471,16 +471,16 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
471471
isDraggable={isDraggable&&isItemDraggable(item)}
472472
isResizable={isResizable&&isItemResizable(item)}
473473
isSelectable={selectable}
474-
transformScale={transformScale}
474+
transformScale={transformScale||1}
475475
w={item.w}
476476
h={extraItem?.hidden&&!extraItem?.isSelected ?0 :item.h}
477477
x={item.x}
478478
y={item.y}
479479
i={item.i}
480-
minH={item.minH}
481-
minW={item.minW}
482-
maxH={item.maxH}
483-
maxW={item.maxW}
480+
minH={item.minH||1}
481+
minW={item.minW||1}
482+
maxH={item.maxH||Infinity}
483+
maxW={item.maxW||Infinity}
484484
placeholder={item.placeholder}
485485
layoutHide={item.hide}
486486
static={item.static}
@@ -496,6 +496,7 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
496496
bottom:(showName?.bottom??0)+(this.ref.current?.scrollHeight??0),
497497
}}
498498
zIndex={zIndex}
499+
className=""
499500
>
500501
{child}
501502
</GridItem>

‎client/packages/lowcoder/src/pages/common/help.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ const introVideoUrl = trans("docUrls.introVideo");
181181
constissueUrl=trans("lowcoderUrl.createIssue");
182182
constdiscordUrl=trans("lowcoderUrl.discord");
183183

184-
exportfunctionHelpDropdown(props:HelpDropdownProps){
184+
functionHelpDropdownComp(props:HelpDropdownProps){
185185
const[showHelp,setShowHelp]=useState(true);
186186
const[version,setVersion]=useState("");
187187
constdispatch=useDispatch();
@@ -446,3 +446,5 @@ export function HelpDropdown(props: HelpDropdownProps) {
446446
</HelpWrapper>
447447
</>);
448448
}
449+
450+
exportconstHelpDropdown=React.memo(HelpDropdownComp);

‎client/packages/lowcoder/src/pages/common/previewHeader.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { getBrandingConfig } from "../../redux/selectors/configSelectors";
2020
import{HeaderStartDropdown}from"./headerStartDropdown";
2121
import{useParams}from"react-router";
2222
import{AppPathParams}from"constants/applicationConstants";
23+
importReactfrom"react";
2324

2425
constHeaderFont=styled.div<{$bgColor:string}>`
2526
font-weight: 500;
@@ -127,7 +128,7 @@ export function HeaderProfile(props: { user: User }) {
127128
);
128129
}
129130

130-
exportconstPreviewHeader=()=>{
131+
constPreviewHeaderComp=()=>{
131132
constparams=useParams<AppPathParams>();
132133
constuser=useSelector(getUser);
133134
constapplication=useSelector(currentApplication);
@@ -203,3 +204,5 @@ export const PreviewHeader = () => {
203204
/>
204205
);
205206
};
207+
208+
exportconstPreviewHeader=React.memo(PreviewHeaderComp);

‎client/packages/lowcoder/src/pages/editor/editorHotKeys.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ function handleMouseDown(e: MouseEvent, editorState: EditorState, showLeftPanel:
113113
}
114114
}
115115

116-
exportfunctionEditorGlobalHotKeys(props:GlobalProps){
116+
exportconstEditorGlobalHotKeys=React.memo((props:GlobalProps)=>{
117117
consteditorState=useContext(EditorContext);
118118
const{history:editorHistory}=useContext(ExternalEditorContext);
119119
const{ togglePanel, panelStatus, toggleShortcutList}=props;
@@ -155,7 +155,7 @@ export function EditorGlobalHotKeys(props: GlobalProps) {
155155
children={props.children}
156156
/>
157157
);
158-
}
158+
})
159159

160160
// local hotkeys
161161
functionhandleEditorKeyDown(e:React.KeyboardEvent,editorState:EditorState){
@@ -186,7 +186,7 @@ function handleEditorKeyDown(e: React.KeyboardEvent, editorState: EditorState) {
186186
}
187187
}
188188

189-
exportfunctionEditorHotKeys(props:Props){
189+
exportconstEditorHotKeys=React.memo((props:Props)=>{
190190
consteditorState=useContext(EditorContext);
191191
constonKeyDown=useCallback(
192192
(e:React.KeyboardEvent)=>handleEditorKeyDown(e,editorState),
@@ -200,9 +200,9 @@ export function EditorHotKeys(props: Props) {
200200
children={props.children}
201201
/>
202202
);
203-
}
203+
})
204204

205-
exportfunctionCustomShortcutWrapper(props:{children:React.ReactNode}){
205+
exportconstCustomShortcutWrapper=React.memo((props:{children:React.ReactNode})=>{
206206
consteditorState=useContext(EditorContext);
207207
consthandleCustomShortcut=useCallback(
208208
(e:KeyboardEvent)=>{
@@ -215,4 +215,4 @@ export function CustomShortcutWrapper(props: { children: React.ReactNode }) {
215215
{props.children}
216216
</GlobalShortcutsWrapper>
217217
);
218-
}
218+
})

‎client/packages/lowcoder/src/pages/editor/editorView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -577,4 +577,4 @@ function EditorView(props: EditorViewProps) {
577577
);
578578
}
579579

580-
exportdefaultEditorView;
580+
exportdefaultReact.memo(EditorView);

‎client/packages/lowcoder/src/pages/editor/right/RightPanel.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { AttributeIcon } from "lowcoder-design";
99
import{InsertIcon}from"lowcoder-design";
1010
import{trans}from"i18n";
1111
import{isAggregationApp}from"util/appUtils";
12+
importReactfrom"react";
1213

1314
typeRightPanelProps={
1415
onTabChange:(key:string)=>void;
@@ -17,7 +18,7 @@ type RightPanelProps = {
1718
uiComp?:InstanceType<typeofUIComp>;
1819
};
1920

20-
exportdefaultfunctionRightPanel(props:RightPanelProps){
21+
functionRightPanel(props:RightPanelProps){
2122
const{ onTabChange, showPropertyPane, uiComp}=props;
2223
constuiCompType=uiComp&&(uiComp.children.compType.getView()asUiLayoutType);
2324
constaggregationApp=uiCompType&&isAggregationApp(uiCompType);
@@ -55,3 +56,5 @@ export default function RightPanel(props: RightPanelProps) {
5556
</RightPanelWrapper>
5657
);
5758
}
59+
60+
exportdefaultReact.memo(RightPanel);

‎client/packages/lowcoder/src/pages/tutorials/editorTutorials.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { i18nObjs } from "../../i18n/index";
3333
import{DatasourceInfo,HttpConfig}from"api/datasourceApi";
3434
import{enObj}from"i18n/locales";
3535
import{QUICK_REST_API_ID}from"constants/datasourceConstants";
36+
importReactfrom"react";
3637

3738
consttourSteps:Step[]=[
3839
{
@@ -203,7 +204,7 @@ function addQuery(editorState: EditorState, datasourceInfos: DatasourceInfo[]) {
203204
editorState.setSelectedBottomRes(queryName,BottomResTypeEnum.Query);
204205
}
205206

206-
exportdefaultfunctionEditorTutorials(){
207+
functionEditorTutorials(){
207208
const[run,setRun]=useState(false);
208209
const[stepIndex,setStepIndex]=useState(0);
209210
consteditorState=useContext(EditorContext);
@@ -309,3 +310,5 @@ export default function EditorTutorials() {
309310
/>
310311
);
311312
}
313+
314+
exportdefaultReact.memo(EditorTutorials);

0 commit comments

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