Merge pull request #840 from nwind/master

优化 select 在大数据量下的性能

package.json

@@ -66,6 +66,7 @@
     "react-progress-2": "^4.4.2",
     "react-select": "1.2.1",
     "react-textarea-autosize": "5.1.0",
+    "react-tiny-virtual-list": "^2.2.0",
     "react-transition-group": "2.9.0",
     "react-visibility-sensor": "3.11.0",
     "redux": "^3.7.2",

src/components/Select.tsx

@@ -7,6 +7,7 @@
 
 import {uncontrollable} from 'uncontrollable';
 import React from 'react';
+import VirtualList from 'react-tiny-virtual-list';
 import Overlay from './Overlay';
 import PopOver from './PopOver';
 import Downshift, {ControllerStateAndHelpers} from 'downshift';
@@ -410,17 +411,23 @@ export class Select extends React.Component<SelectProps, SelectState> {
     ) {
       let selection: Array<Option>;
       if (
-        (
-          !prevProps.options
-          || !prevProps.options.length
-        )
-        && props.options.length
+        (!prevProps.options || !prevProps.options.length) &&
+        props.options.length
       ) {
         const {selection: stateSelection} = this.state;
-        const {multiple, defaultCheckAll, options, onChange, simpleValue} = props;
+        const {
+          multiple,
+          defaultCheckAll,
+          options,
+          onChange,
+          simpleValue
+        } = props;
         if (multiple && defaultCheckAll && options.length) {
           selection = union(options, stateSelection);
-          fn = () => onChange(simpleValue ? selection.map(item => item.value) : selection);
+          fn = () =>
+            onChange(
+              simpleValue ? selection.map(item => item.value) : selection
+            );
         } else {
           selection = value2array(props.value, props);
         }
@@ -428,9 +435,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
         selection = value2array(props.value, props);
       }
 
-      this.setState({
+      this.setState(
+        {
           selection: selection
-      }, fn);
+        },
+        fn
+      );
     }
   }
 
@@ -774,13 +784,16 @@ export class Select extends React.Component<SelectProps, SelectState> {
           </div>
         ) : null}
 
-        {/* todo 当数目比较多的时候会卡顿，需要优化这个滚动。 */}
         {filtedOptions.length ? (
-          filtedOptions.map((item, index) => {
+          <VirtualList
+            height={280}
+            itemCount={filtedOptions.length}
+            itemSize={35}
+            renderItem={({index, style}) => {
+              const item = filtedOptions[index];
               const checked =
                 selectedItem === item ||
                 !!~selectionValues.indexOf(item[valueField]);
-
               return (
                 <div
                   {...getItemProps({
@@ -792,6 +805,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                     item,
                     disabled: item.disabled
                   })}
+                  style={style}
                   className={cx(`Select-option`, {
                     'is-disabled': item.disabled,
                     'is-highlight': highlightedIndex === index,
@@ -850,7 +864,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
                   )}
                 </div>
               );
-          })
+            }}
+          />
         ) : (
           <div className={cx('Select-noResult')}>{__(noResultsText)}</div>
         )}