From ca1fc0517355b45fa661859872e6e8dfda02629a Mon Sep 17 00:00:00 2001 From: JayZhong Date: Mon, 8 Apr 2019 16:35:15 +0800 Subject: [PATCH 1/7] =?UTF-8?q?chore:=20=E6=80=A7=E8=83=BD=E8=B0=83?= =?UTF-8?q?=E4=BC=98=EF=BC=8C=E5=B0=86=E8=8E=B7=E5=8F=96offsetwidth?= =?UTF-8?q?=E7=9A=84=E8=A1=8C=E4=B8=BA=E6=94=BE=E7=BD=AEraf=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 背景：针对表格大量数据下调优，表格下的分页控件使用了改控件 优化：将获取offsetwidth的行为放置raf中 --- src/SelectTrigger.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index b8a71bd87..bfb2890ef 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -9,6 +9,12 @@ import { isSingleMode, saveRef } from './util'; Trigger.displayName = 'Trigger'; +const raf = window.requestAnimationFrame + || window.webkitRequestAnimationFrame + || window.mozRequestAnimationFrame + || window.msRequestAnimationFrame + || function(cb) { return setTimeout(cb, 16); }; + const BUILT_IN_PLACEMENTS = { bottomLeft: { points: ['tl', 'bl'], @@ -111,11 +117,11 @@ export default class SelectTrigger extends React.Component< } public componentDidMount() { - this.setDropdownWidth(); + raf(this.setDropdownWidth); } public componentDidUpdate() { - this.setDropdownWidth(); + raf(this.setDropdownWidth); } public setDropdownWidth = () => { From fed8368c42ba27786ce059d3e4feb6d489db6b9e Mon Sep 17 00:00:00 2001 From: zhongjiahao Date: Tue, 9 Apr 2019 10:50:50 +0800 Subject: [PATCH 2/7] =?UTF-8?q?chore:=20=E4=BD=BF=E7=94=A8raf=E5=BA=93?= =?UTF-8?q?=E6=9B=BF=E4=BB=A3window.raf?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SelectTrigger.tsx | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index bfb2890ef..04849efac 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -1,5 +1,6 @@ import classnames from 'classnames'; import * as PropTypes from 'prop-types'; +import raf from 'raf'; import Trigger from 'rc-trigger'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; @@ -9,12 +10,6 @@ import { isSingleMode, saveRef } from './util'; Trigger.displayName = 'Trigger'; -const raf = window.requestAnimationFrame - || window.webkitRequestAnimationFrame - || window.mozRequestAnimationFrame - || window.msRequestAnimationFrame - || function(cb) { return setTimeout(cb, 16); }; - const BUILT_IN_PLACEMENTS = { bottomLeft: { points: ['tl', 'bl'], @@ -104,6 +99,9 @@ export default class SelectTrigger extends React.Component< public saveTriggerRef: (ref: any) => void; public dropdownMenuRef: DropdownMenu | null = null; public triggerRef: any; + public rafInstance: { + cancel: () => void; + } = { cancel: () => null }; constructor(props: Partial) { super(props); @@ -117,19 +115,27 @@ export default class SelectTrigger extends React.Component< } public componentDidMount() { - raf(this.setDropdownWidth); + this.setDropdownWidth(); } public componentDidUpdate() { - raf(this.setDropdownWidth); + this.setDropdownWidth(); } - public setDropdownWidth = () => { - const dom = ReactDOM.findDOMNode(this) as HTMLDivElement; - const width = dom.offsetWidth; - if (width !== this.state.dropdownWidth) { - this.setState({ dropdownWidth: width }); + public componentWillUnmount() { + if (this.rafInstance && this.rafInstance.cancel) { + this.rafInstance.cancel(); } + } + + public setDropdownWidth = () => { + this.rafInstance = raf(() => { + const dom = ReactDOM.findDOMNode(this) as HTMLDivElement; + const width = dom.offsetWidth; + if (width !== this.state.dropdownWidth) { + this.setState({ dropdownWidth: width }); + } + }); }; public getInnerMenu = () => { From 9085f91503ab20744f180a7eb4a2c8341a35acfc Mon Sep 17 00:00:00 2001 From: zzzJH Date: Tue, 9 Apr 2019 11:54:57 +0800 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20=E5=9C=A8=E6=AF=8F=E6=AC=A1raf?= =?UTF-8?q?=E5=89=8D=E5=8F=96=E6=B6=88=E4=B8=8A=E6=AC=A1raf?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SelectTrigger.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index 04849efac..038c5aa8c 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -129,6 +129,9 @@ export default class SelectTrigger extends React.Component< } public setDropdownWidth = () => { + if (this.rafInstance && this.rafInstance.cancel) { + this.rafInstance.cancel(); + } this.rafInstance = raf(() => { const dom = ReactDOM.findDOMNode(this) as HTMLDivElement; const width = dom.offsetWidth; From ccb864d231fee294fe340396720470dfeb2e8487 Mon Sep 17 00:00:00 2001 From: zzzJH Date: Tue, 9 Apr 2019 15:38:01 +0800 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E@types/raf?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 321123d6c..f618bf695 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "devDependencies": { "@types/classnames": "^2.2.6", "@types/enzyme": "^3.1.15", + "@types/raf": "^3.4.0", "@types/react": "^16.7.17", "@types/react-dom": "^16.0.11", "@types/warning": "^3.0.0", From 79874fce5f7f71c495d0cf4c88ab2e228f6a500b Mon Sep 17 00:00:00 2001 From: zzzJH Date: Tue, 9 Apr 2019 15:52:35 +0800 Subject: [PATCH 5/7] =?UTF-8?q?chore:=20=E5=BA=93raf=E6=AD=A3=E7=A1=AE?= =?UTF-8?q?=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SelectTrigger.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index 038c5aa8c..2a7e8c415 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -99,9 +99,7 @@ export default class SelectTrigger extends React.Component< public saveTriggerRef: (ref: any) => void; public dropdownMenuRef: DropdownMenu | null = null; public triggerRef: any; - public rafInstance: { - cancel: () => void; - } = { cancel: () => null }; + public rafInstance: number | null = null; constructor(props: Partial) { super(props); @@ -123,14 +121,14 @@ export default class SelectTrigger extends React.Component< } public componentWillUnmount() { - if (this.rafInstance && this.rafInstance.cancel) { - this.rafInstance.cancel(); + if (this.rafInstance) { + raf.cancel(this.rafInstance); } } public setDropdownWidth = () => { - if (this.rafInstance && this.rafInstance.cancel) { - this.rafInstance.cancel(); + if (this.rafInstance) { + raf.cancel(this.rafInstance); } this.rafInstance = raf(() => { const dom = ReactDOM.findDOMNode(this) as HTMLDivElement; From e9b645e46117267ace07790f1a1d92c70f8b9234 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Tue, 9 Apr 2019 15:56:34 +0800 Subject: [PATCH 6/7] remove custom declare of 'raf' --- typings/index.d.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/typings/index.d.ts b/typings/index.d.ts index 757ff5815..ae54f7cb4 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -12,6 +12,4 @@ declare module 'rc-util/lib/KeyCode'; declare module 'dom-scroll-into-view'; -declare module 'raf'; - declare module 'rc-trigger'; From adc6ef357130d04007532bb9d1afd81aa6d47c4d Mon Sep 17 00:00:00 2001 From: zzzJH Date: Tue, 9 Apr 2019 20:29:24 +0800 Subject: [PATCH 7/7] =?UTF-8?q?chore:=20=E9=87=8D=E5=A4=8D=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E6=8A=BD=E7=A6=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/SelectTrigger.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/SelectTrigger.tsx b/src/SelectTrigger.tsx index 2a7e8c415..06f39d895 100644 --- a/src/SelectTrigger.tsx +++ b/src/SelectTrigger.tsx @@ -121,15 +121,11 @@ export default class SelectTrigger extends React.Component< } public componentWillUnmount() { - if (this.rafInstance) { - raf.cancel(this.rafInstance); - } + this.cancelRafInstance(); } public setDropdownWidth = () => { - if (this.rafInstance) { - raf.cancel(this.rafInstance); - } + this.cancelRafInstance(); this.rafInstance = raf(() => { const dom = ReactDOM.findDOMNode(this) as HTMLDivElement; const width = dom.offsetWidth; @@ -139,6 +135,12 @@ export default class SelectTrigger extends React.Component< }); }; + public cancelRafInstance = () => { + if (this.rafInstance) { + raf.cancel(this.rafInstance); + } + }; + public getInnerMenu = () => { return this.dropdownMenuRef && this.dropdownMenuRef.menuRef; };