新品到着优化 review by 孙凯

@@ -13,6 +13,7 @@ import ReactNative, {
 } from 'react-native';
 
 import SlicedImage from '../../../common/components/SlicedImage';
+import Immutable, {Map, List} from 'immutable';
 
 export default class ProductListCell extends Component {
 
@@ -20,6 +21,13 @@ export default class ProductListCell extends Component {
         super(props);
     }
 
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.data, this.props.data)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
 
     render() {
         let {data, sourceType, index, style} = this.props;

@@ -30,6 +30,7 @@ const VIEWABILITY_CONFIG = {
     waitForInteraction: true,
 };
 
+
 export default class NewArrival extends React.PureComponent {
 
     constructor(props) {
@@ -38,6 +39,7 @@ export default class NewArrival extends React.PureComponent {
         this.renderSectionHeader = this.renderSectionHeader.bind(this);
         this._onPressProductFilter = this._onPressProductFilter.bind(this);
         this._renderHeader = this._renderHeader.bind(this);
+
         this.renderItem = this.renderItem.bind(this);
 
         this.state = {
@@ -91,6 +93,7 @@ export default class NewArrival extends React.PureComponent {
         let data = rowData.get('data');
         let yh_exposureDataList = rowData.get('yh_exposureDataList');
 
+
         let paddingLeft = index % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
         let customStyle = index == 0 || index == 1 ? {paddingLeft} : {paddingLeft};
 
@@ -195,6 +198,21 @@ export default class NewArrival extends React.PureComponent {
         let isLoadingMore = productList.isFetching && productList.currentPage > 0;
         let endReached = productList.endReached;
 
+        if (latest.length == 0) {
+            if (isFetching) {
+                return (
+                        <View style={styles.container}>
+                            <LoadingIndicator
+                            isVisible={isFetching}
+                        />
+                    </View>
+                );
+            }
+
+            return null;
+        }
+
+
         return (
             <View style={styles.container}>
                 <SectionList
@@ -204,6 +222,19 @@ export default class NewArrival extends React.PureComponent {
                     contentContainerStyle={styles.contentContainer}
                     ListHeaderComponent={this._renderHeader}
                     renderSectionHeader={this.renderSectionHeader}
+                    keyExtractor={(item, index) => {
+                        let type = item.get('recommend_type', '');
+                        if (type) {
+                            return type + index + '';
+                        } else {
+                            let skn = item.get('product_skn', '');
+                            if (skn) {
+                                return skn + '';
+                            }
+                        }
+
+                        return index + '';
+                    }}
                     ListFooterComponent={()=>{
                         if (endReached) {
                             return <View style={styles.placeholder} />;
@@ -221,7 +252,7 @@ export default class NewArrival extends React.PureComponent {
                     renderItem={this.renderItem}
                     sections={[{data: latest, key: 'latest'}]}
                     viewabilityConfig={VIEWABILITY_CONFIG}
-                    keyExtractor={(item,index) => 'index'+index}
+                    onEndReachedThreshold={1000}
                     onEndReached={() => {
                         if (productList && productList.list && productList.list.size > 0) {
                             this.props.onEndReached && this.props.onEndReached();
@@ -236,6 +267,7 @@ export default class NewArrival extends React.PureComponent {
                         }
                     }}
                 />
+                
                 {productList.isFilter ?
                     <NewArrivalCategoryList
                         productList={productList}

@@ -132,6 +132,7 @@ let styles = StyleSheet.create({
         position: 'absolute',
         flexDirection: 'column',
         left: 0,
+        top: 0,
         width: width,
         height: height ,
         backgroundColor: '#ffffff',
@@ -141,7 +142,7 @@ let styles = StyleSheet.create({
         borderLeftWidth: 0,
         borderRightWidth: 0,
         borderBottomWidth: 0,
-
+        position: 'absolute',
     },
     container:{
         flex: 1,

@@ -13,6 +13,7 @@ import ReactNative, {
 } from 'react-native';
 
 import SlicedImage from '../../../common/components/SlicedImage';
+import Immutable, {Map, List} from 'immutable';
 
 export default class ProductListCell extends Component {
 
@@ -20,6 +21,13 @@ export default class ProductListCell extends Component {
         super(props);
     }
 
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.data, this.props.data)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
 
     render() {
         let {data, rowID, style} = this.props;

@@ -13,6 +13,7 @@ import ReactNative, {
 } from 'react-native';
 
 import SlicedImage from '../../../common/components/SlicedImage';
+import Immutable, {Map, List} from 'immutable';
 
 export default class ProductListCell extends Component {
 
@@ -22,6 +23,14 @@ export default class ProductListCell extends Component {
         this._renderImages = this._renderImages.bind(this);
     }
 
+    shouldComponentUpdate(nextProps){
+        if (Immutable.is(nextProps.data, this.props.data)) {
+            return false;
+        } else {
+            return true;
+        }
+    }
+
     _renderImages() {
         let {data, recommend_type} = this.props;
 

@@ -436,41 +436,45 @@ class NewArrivalContainer extends Component {
         return (
             <View style={styles.container}>
                 <NewArrival
-                isFetching={isFetching}
-                productList={productList}
-                categoryFilterList={categoryFilterList}
-                filterCategoryDetailFilterList={filterCategoryDetailFilterList}
-                filterFactors={filterFactors}
-                filterNameFactors={filterNameFactors}
-                topPart={topPart}
-                onEndReached={this._onEndReached}
-                onPressProductFilter={this._onPressProductFilter}
-                onPressProductFilterLeftItem={this._onPressProductFilterLeftItem}
-                onPressProductFilterRightItem={this._onPressProductFilterRightItem}
-                onPressMoreFilter={this._onPressMoreFilter}
-                onPressCloseMoreFilter={this._onPressCloseMoreFilter}
-                onPressShop={this._onPressShop}
-                onPressProductListProduct={this._onPressProductListProduct}
-                goToRecommendForYou={this._goToRecommendForYou}
-                onPressCategory={this._onPressCategory}
-                onPressHotSearch={this._onPressHotSearch}
-                onPressArticle={this._onPressArticle}
-                onPressBanner={this._onPressBanner}
-                onPressCarouselItem={this._onPressCarouselItem}
-                onPressProductListShop={this._onPressProductListShop}
-                onLongPressProduct={this._onLongPressProduct}
-                onPressFindSimilar={this._onPressFindSimilar}
-                onPressDislike={this._onPressDislike}
-                showSimilarGuider={showSimilarGuider}
+                    isFetching={isFetching}
+                    productList={productList}
+                    categoryFilterList={categoryFilterList}
+                    filterCategoryDetailFilterList={filterCategoryDetailFilterList}
+                    filterFactors={filterFactors}
+                    filterNameFactors={filterNameFactors}
+                    topPart={topPart}
+                    onEndReached={this._onEndReached}
+                    onPressProductFilter={this._onPressProductFilter}
+                    onPressProductFilterLeftItem={this._onPressProductFilterLeftItem}
+                    onPressProductFilterRightItem={this._onPressProductFilterRightItem}
+                    onPressMoreFilter={this._onPressMoreFilter}
+                    onPressCloseMoreFilter={this._onPressCloseMoreFilter}
+                    onPressShop={this._onPressShop}
+                    onPressProductListProduct={this._onPressProductListProduct}
+                    goToRecommendForYou={this._goToRecommendForYou}
+                    onPressCategory={this._onPressCategory}
+                    onPressHotSearch={this._onPressHotSearch}
+                    onPressArticle={this._onPressArticle}
+                    onPressBanner={this._onPressBanner}
+                    onPressCarouselItem={this._onPressCarouselItem}
+                    onPressProductListShop={this._onPressProductListShop}
+                    onLongPressProduct={this._onLongPressProduct}
+                    onPressFindSimilar={this._onPressFindSimilar}
+                    onPressDislike={this._onPressDislike}
+                    showSimilarGuider={showSimilarGuider}
                 />
             </View>
         );
     }
 }
 
+let {width, height} = Dimensions.get('window');
+
 let styles = StyleSheet.create({
     container: {
         flex: 1,
+        width: width,
+        height: height - 64 - 44,
     },
 
 });