店铺性能优化 review by 草莓

@@ -14,14 +14,24 @@ const {
   TouchableOpacity,
 } = ReactNative;
 
+import Immutable, {Map} from 'immutable';
+
 export default class BrandListCell extends React.Component {
     constructor(props) {
-      super(props);
-      this.dataSource = new ListView.DataSource({
-          rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
-      });
+        super(props);
+        this.dataSource = new ListView.DataSource({
+            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
+        });
     }
 
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+    
     _pressRow(rowData){
 		this.props.onPressBrandItem(rowData.url)
   	}
@@ -39,7 +49,7 @@ export default class BrandListCell extends React.Component {
                               resizeMode={'contain'}
                           ></Image>
                     </View>
-                     <View style={styles.textV}>
+                    <View style={styles.textV}>
                         <Text style={styles.text}  numberOfLines={1}>
                             {rowData.name}
                         </Text>

@@ -127,34 +127,36 @@ export default class BrandProductFilter extends React.Component {
             }
         }
         return (
-            <TouchableOpacity activeOpacity={1} onPress={() => {
-
-                let filters = this.state.filters;
-                let filter = this.state.filters[rowID];
-                if (filter.radio) {
-                    this.props.onPressFilter && this.props.onPressFilter(filters[0].key);
-                    return;
-                }
-                if (rowID == 3) {
-                    let value = 'filter';
+            <View style={{backgroundColor: 'white'}}>
+                <TouchableOpacity style={{backgroundColor: 'white', flex: 1}} onPress={() => {
+
+                    let filters = this.state.filters;
+                    let filter = this.state.filters[rowID];
+                    if (filter.radio) {
+                        this.props.onPressFilter && this.props.onPressFilter(filters[0].key);
+                        return;
+                    }
+                    if (rowID == 3) {
+                        let value = 'filter';
+                        this.props.onPressFilter && this.props.onPressFilter(value);
+                        return;
+                    }
+                    filter.isAsc = !filter.isAsc;
+                    filters[rowID] = filter;
+                    this.setState({
+                        selectedIndex: rowID,
+                        filters,
+                    });
+
+                    let value = filter.isAsc ? filter.value['asc'] : filter.value['desc'];
                     this.props.onPressFilter && this.props.onPressFilter(value);
-                    return;
-                }
-                filter.isAsc = !filter.isAsc;
-                filters[rowID] = filter;
-                this.setState({
-                    selectedIndex: rowID,
-                    filters,
-                });
-
-                let value = filter.isAsc ? filter.value['asc'] : filter.value['desc'];
-                this.props.onPressFilter && this.props.onPressFilter(value);
-            }}>
-                <View key={'row' + rowID} style={styles.rowContainer}>
-                    <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
-                    {this._renderImage(rowData, rowID)}
-                </View>
-            </TouchableOpacity>
+                }}>
+                    <View key={'row' + rowID} style={styles.rowContainer}>
+                        <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
+                        {this._renderImage(rowData, rowID)}
+                    </View>
+                </TouchableOpacity>
+            </View>
         );
     }
 

@@ -52,32 +52,42 @@ export default class BrandStoreFilter extends React.Component {
         };
     }
 
+    shouldComponentUpdate(nextProps){
+        if (nextProps.selectID == this.props.selectID) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
     _renderRow(rowData, sectionID, rowID) {
 
         let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
 
         return (
-            <TouchableOpacity onPress={() => {
-                let filters = this.state.filters;
-                let filter = this.state.filters[rowID];
-                if (this.state.selectedIndex == rowID) {
-                    return;
-                }
-
-                filter.isSelect = !filter.isSelect;
-                filters[rowID] = filter;
-                if (rowID != 3) {
-                    this.setState({
-                        selectedIndex: rowID,
-                        filters,
-                    });
-                }
-                this.props.onPressFilter && this.props.onPressFilter(rowID);
-            }}>
-                <View key={'row' + rowID} style={styles.rowContainer}>
-                    <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
-                </View>
-            </TouchableOpacity>
+            <View style={{backgroundColor: 'white'}}>
+                <TouchableOpacity onPress={() => {
+                    let filters = this.state.filters;
+                    let filter = this.state.filters[rowID];
+                    if (this.state.selectedIndex == rowID) {
+                        return;
+                    }
+
+                    filter.isSelect = !filter.isSelect;
+                    filters[rowID] = filter;
+                    if (rowID != 3) {
+                        this.setState({
+                            selectedIndex: rowID,
+                            filters,
+                        });
+                    }
+                    this.props.onPressFilter && this.props.onPressFilter(rowID);
+                }}>
+                    <View key={'row' + rowID} style={styles.rowContainer}>
+                        <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
+                    </View>
+                </TouchableOpacity>
+            </View>
         );
     }
 
@@ -90,12 +100,10 @@ export default class BrandStoreFilter extends React.Component {
 
     render() {
 
-        let {style} = this.props;
-
         return (
-            <View style={[styles.container, style]}>
+            <View style={[styles.container]}>
                 <ListView
-                    contentContainerStyle={[styles.contentContainer, style]}
+                    contentContainerStyle={[styles.contentContainer]}
                     enableEmptySections={true}
                     dataSource={this.dataSource.cloneWithRows(this.state.filters)}
                     renderRow={this._renderRow}

@@ -14,6 +14,8 @@ const {
     Platform,
 } = ReactNative;
 
+import Immutable, {Map} from 'immutable';
+
 export default class BrandSwiper extends React.Component {
 
     constructor(props) {
@@ -45,6 +47,14 @@ export default class BrandSwiper extends React.Component {
         />;
     }
 
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
     render() {
 
         let {resource} = this.props;

@@ -14,6 +14,8 @@ const {
   TouchableOpacity,
 } = ReactNative;
 
+import Immutable, {Map} from 'immutable';
+
 export default class CouponCell extends React.Component {
     constructor(props) {
       super(props);
@@ -25,6 +27,14 @@ export default class CouponCell extends React.Component {
       };
     }
 
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
     renderRow(rowData,sectionID,rowID,highlightRow) {
 
         let data = this.props.resource.toJS();

@@ -14,7 +14,7 @@ const {
     Platform,
 } = ReactNative;
 
-import {Map} from 'immutable';
+import Immutable, {Map} from 'immutable';
 import BrandProductListCell from '../../../../../common/components/ListCell/ProductListCell';
 import DeviceInfo from 'react-native-device-info';
 
@@ -31,8 +31,12 @@ export default class HotProducts extends React.Component {
 		});
 	}
 
-    componentDidMount() {
-
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
     }
 
 	renderRow(rowData,sectionID,rowID,highlightRow) {

@@ -11,13 +11,20 @@ const {
     TouchableOpacity,
 } = ReactNative;
 
+import Immutable, {Map} from 'immutable';
+
 export default class OneRowTwoColImages extends React.Component {
 
     constructor(props) {
         super (props);
     }
 
-    componentDidMount() {
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
     }
 
     render() {
@@ -25,6 +32,7 @@ export default class OneRowTwoColImages extends React.Component {
 		if (this.props.resource.size == 0) {
 			return null;
 		}
+		
         let data = this.props.resource.toJS();
 		return (
 			<View style={styles.viewStyle}>

@@ -14,8 +14,8 @@ const {
     Platform,
 } = ReactNative;
 
-import {Map} from 'immutable';
 import DeviceInfo from 'react-native-device-info';
+import Immutable, {Map} from 'immutable';
 
 export default class Recommend extends React.Component {
 
@@ -30,6 +30,14 @@ export default class Recommend extends React.Component {
 		});
     }
 
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.resource, this.props.resource)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
 	renderRow(rowData, sectionID, rowID, highlightRow) {
 		return (
 			<TouchableOpacity activeOpacity={0.5}  onPress={() => {