性能调优，将获取offsetwidth的行为放置requestAnimationFrame中 (#395)

* chore: 性能调优，将获取offsetwidth的行为放置raf中

背景：针对表格大量数据下调优，表格下的分页控件使用了改控件
优化：将获取offsetwidth的行为放置raf中

* chore: 使用raf库替代window.raf

* fix: 在每次raf前取消上次raf

* feat: 新增@types/raf

* chore: 库raf正确使用

* remove custom declare of 'raf'

* chore: 重复代码抽离

Author: zzzJH

package.json

@@ -47,6 +47,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",

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';
@@ -98,6 +99,7 @@ export default class SelectTrigger extends React.Component<
   public saveTriggerRef: (ref: any) => void;
   public dropdownMenuRef: DropdownMenu | null = null;
   public triggerRef: any;
+  public rafInstance: number | null = null;
 
   constructor(props: Partial<ISelectTriggerProps>) {
     super(props);
@@ -118,11 +120,24 @@ export default class SelectTrigger extends React.Component<
     this.setDropdownWidth();
   }
 
+  public componentWillUnmount() {
+    this.cancelRafInstance();
+  }
+
   public setDropdownWidth = () => {
-    const dom = ReactDOM.findDOMNode(this) as HTMLDivElement;
-    const width = dom.offsetWidth;
-    if (width !== this.state.dropdownWidth) {
-      this.setState({ dropdownWidth: width });
+    this.cancelRafInstance();
+    this.rafInstance = raf(() => {
+      const dom = ReactDOM.findDOMNode(this) as HTMLDivElement;
+      const width = dom.offsetWidth;
+      if (width !== this.state.dropdownWidth) {
+        this.setState({ dropdownWidth: width });
+      }
+    });
+  };
+
+  public cancelRafInstance = () => {
+    if (this.rafInstance) {
+      raf.cancel(this.rafInstance);
     }
   };
 

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';