Improve transfer perfermance, close #2112

components/transfer/index.jsx

@@ -55,13 +55,28 @@ export default class Transfer extends React.Component {
   }
   componentWillReceiveProps(nextProps) {
     const { leftCheckedKeys, rightCheckedKeys } = this.state;
-    const { leftDataSource, rightDataSource } = this.splitDataSource(nextProps);
+    if (nextProps.targetKeys !== this.props.targetKeys ||
-    this.setState({
+        nextProps.dataSource !== this.props.dataSource) {
-      leftCheckedKeys: leftCheckedKeys.filter(data => leftDataSource.filter(leftData => leftData.key === data).length),
+      // clear cached splited dataSource
-      rightCheckedKeys: rightCheckedKeys.filter(data => rightDataSource.filter(rightData => rightData.key === data).length),
+      this.splitedDataSource = null;
-    });
+
+      const { dataSource, targetKeys } = nextProps;
+      // clear key nolonger existed
+      // clear checkedKeys according to targetKeys
+      this.setState({
+        leftCheckedKeys: leftCheckedKeys
+          .filter(data => dataSource.filter(item => item.key === data).length)
+          .filter(data => targetKeys.filter(key => key === data).length === 0),
+        rightCheckedKeys: rightCheckedKeys
+          .filter(data => dataSource.filter(item => item.key === data).length)
+          .filter(data => targetKeys.filter(key => key === data).length > 0),
+      });
+    }
   }
   splitDataSource(props) {
+    if (this.splitedDataSource) {
+      return this.splitedDataSource;
+    }
     const { targetKeys } = props;
     let { dataSource } = props;
 
@@ -86,10 +101,12 @@ export default class Transfer extends React.Component {
       });
     }
 
-    return {
+    this.splitedDataSource = {
       leftDataSource,
       rightDataSource,
     };
+
+    return this.splitedDataSource;
   }
 
   moveTo = (direction) => {
@@ -194,7 +211,7 @@ export default class Transfer extends React.Component {
 
   handleSelect = (direction, selectedItem, checked) => {
     const { leftCheckedKeys, rightCheckedKeys } = this.state;
-    const holder = direction === 'left' ? leftCheckedKeys : rightCheckedKeys;
+    const holder = direction === 'left' ? [...leftCheckedKeys] : [...rightCheckedKeys];
     let index;
     holder.forEach((key, i) => {
       if (key === selectedItem.key) {

components/transfer/list.jsx

@@ -3,6 +3,7 @@ import Checkbox from '../checkbox';
 import Search from './search';
 import classNames from 'classnames';
 import Animate from 'rc-animate';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 function noop() {
 }
@@ -60,6 +61,10 @@ export default class TransferList extends React.Component {
     }, 0);
   }
 
+  shouldComponentUpdate(...args) {
+    return PureRenderMixin.shouldComponentUpdate.apply(this, args);
+  }
+
   handleSelectAll = () => {
     this.props.handleSelectAll();
   }
@@ -128,7 +133,6 @@ export default class TransferList extends React.Component {
       } else {
         itemText = renderResult;
       }
-
       const filterResult = this.matchFilter(itemText, filter);
       return !!filterResult;
     }).map((item) => {