From 70892b98af24f8a17ac6496754af77f274f1178d Mon Sep 17 00:00:00 2001 From: Sreten Madzgalj Date: Tue, 4 Apr 2023 17:58:47 +0200 Subject: [PATCH 1/6] perf: useMemo for marks and steps --- src/Slider.tsx | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/Slider.tsx b/src/Slider.tsx index 00b9f7004..441b70488 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -476,6 +476,22 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref) ], ); + // Performance improvements to not rerender marks and steps while dragging + const marksElements = React.useMemo(() => { + return ; + }, [markList, prefixCls, changeToCloseValue]); + const stepsElements = React.useMemo(() => { + return ( + + ); + }, [markList, prefixCls, dots, dotStyle, activeDotStyle]); + // ============================ Render ============================ return ( @@ -500,13 +516,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref) onStartMove={mergedDraggableTrack ? onStartMove : null} /> - + {stepsElements} ) handleRender={handleRender} /> - + {marksElements} ); From d5b54808889afa479370e03a5b1df7d5ea5a2f72 Mon Sep 17 00:00:00 2001 From: Sreten Madzgalj Date: Tue, 4 Apr 2023 18:36:15 +0200 Subject: [PATCH 2/6] 10.1.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 678ae6d0c..c1013580f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-slider", - "version": "10.1.1", + "version": "10.1.2", "description": "Slider UI component for React", "engines": { "node": ">=8.x" From dda28fc30127e6ddf552046fea5ab0926545928b Mon Sep 17 00:00:00 2001 From: Sreten Madzgalj Date: Tue, 4 Apr 2023 18:42:35 +0200 Subject: [PATCH 3/6] package name --- package.json | 50 +++++++++++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/package.json b/package.json index c1013580f..c753e2963 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,7 @@ { - "name": "rc-slider", - "version": "10.1.2", + "name": "rc-slider-perf", + "version": "10.1.3", "description": "Slider UI component for React", - "engines": { - "node": ">=8.x" - }, "keywords": [ "react", "react-component", @@ -13,40 +10,36 @@ "input", "range" ], - "homepage": "http://github.com/react-component/slider/", + "homepage": "http://github.com/madzgo/rc-slider-perf/", + "bugs": { + "url": "http://github.com/madzgo/rc-slider-perf/issues" + }, "repository": { "type": "git", - "url": "git@github.com:react-component/slider.git" - }, - "bugs": { - "url": "http://github.com/react-component/slider/issues" + "url": "git@github.com:madzgo/rc-slider-perf.git" }, + "license": "MIT", + "main": "./lib/index", + "module": "./es/index", + "types": "./lib/index.d.ts", + "style": "./assets/index.css", "files": [ "assets/*.css", "lib", "es", "dist" ], - "license": "MIT", - "main": "./lib/index", - "module": "./es/index", - "style": "./assets/index.css", - "types": "./lib/index.d.ts", "scripts": { - "start": "dumi dev", + "compile": "father build && lessc assets/index.less assets/index.css", + "coverage": "father test --coverage", "docs:build": "dumi build", "docs:deploy": "gh-pages -d .doc", - "compile": "father build && lessc assets/index.less assets/index.css", - "prepublishOnly": "npm run compile && np --yolo --no-publish", "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md", + "now-build": "npm run docs:build", + "prepublishOnly": "npm run compile && np --yolo --no-publish", "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"", - "test": "father test", - "coverage": "father test --coverage", - "now-build": "npm run docs:build" - }, - "peerDependencies": { - "react": ">=16.9.0", - "react-dom": ">=16.9.0" + "start": "dumi dev", + "test": "father test" }, "dependencies": { "@babel/runtime": "^7.10.1", @@ -79,5 +72,12 @@ "react-dom": "^16.0.0", "regenerator-runtime": "^0.13.9", "typescript": "^4.0.5" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + }, + "engines": { + "node": ">=8.x" } } From 4fc447f797ebeb5bb79074cfe3d49d861c640539 Mon Sep 17 00:00:00 2001 From: Sreten Madzgalj Date: Tue, 4 Apr 2023 18:42:44 +0200 Subject: [PATCH 4/6] 10.1.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c753e2963..11c92a478 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-slider-perf", - "version": "10.1.3", + "version": "10.1.4", "description": "Slider UI component for React", "keywords": [ "react", From 6a06562c1cf5f2e4f34c4a3e42a5e5dc5b458f03 Mon Sep 17 00:00:00 2001 From: Sreten Madzgalj Date: Tue, 4 Apr 2023 19:08:31 +0200 Subject: [PATCH 5/6] remove on click --- src/Marks/Mark.tsx | 9 +-------- src/Marks/index.tsx | 11 ++--------- src/Slider.tsx | 5 +++-- 3 files changed, 6 insertions(+), 19 deletions(-) diff --git a/src/Marks/Mark.tsx b/src/Marks/Mark.tsx index bcbb362d6..a2d36503c 100644 --- a/src/Marks/Mark.tsx +++ b/src/Marks/Mark.tsx @@ -8,11 +8,10 @@ export interface MarkProps { children?: React.ReactNode; style?: React.CSSProperties; value: number; - onClick: (value: number) => void; } export default function Mark(props: MarkProps) { - const { prefixCls, style, children, value, onClick } = props; + const { prefixCls, style, children, value } = props; const { min, max, direction, includedStart, includedEnd, included } = React.useContext(SliderContext); @@ -30,12 +29,6 @@ export default function Mark(props: MarkProps) { ...positionStyle, ...style, }} - onMouseDown={(e) => { - e.stopPropagation(); - }} - onClick={() => { - onClick(value); - }} > {children} diff --git a/src/Marks/index.tsx b/src/Marks/index.tsx index 1fd1bab94..16983119e 100644 --- a/src/Marks/index.tsx +++ b/src/Marks/index.tsx @@ -13,11 +13,10 @@ export interface InternalMarkObj extends MarkObj { export interface MarksProps { prefixCls: string; marks?: InternalMarkObj[]; - onClick: (value: number) => void; } export default function Marks(props: MarksProps) { - const { prefixCls, marks, onClick } = props; + const { prefixCls, marks } = props; const markPrefixCls = `${prefixCls}-mark`; @@ -29,13 +28,7 @@ export default function Marks(props: MarksProps) { return (
{marks.map(({ value, style, label }) => ( - + {label} ))} diff --git a/src/Slider.tsx b/src/Slider.tsx index 441b70488..c57fe9c7d 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -478,8 +478,9 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref) // Performance improvements to not rerender marks and steps while dragging const marksElements = React.useMemo(() => { - return ; - }, [markList, prefixCls, changeToCloseValue]); + return ; + }, [markList, prefixCls]); + const stepsElements = React.useMemo(() => { return ( Date: Tue, 4 Apr 2023 19:08:53 +0200 Subject: [PATCH 6/6] 10.1.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 11c92a478..0a0537f70 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-slider-perf", - "version": "10.1.4", + "version": "10.1.5", "description": "Slider UI component for React", "keywords": [ "react",