mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit 3992a5c35e8881f72a8327d16fca609d9adcdf27 1 parent f914b82e

店铺性能优化 review by 草莓

Inline Side-by-side
Showing 8 changed files with 122 additions and 62 deletions
@@ -14,14 +14,24 @@ const { @@ -14,14 +14,24 @@ const {
14 TouchableOpacity, 14 TouchableOpacity,
15 } = ReactNative; 15 } = ReactNative;
16 16
  17 +import Immutable, {Map} from 'immutable';
  18 +
17 export default class BrandListCell extends React.Component { 19 export default class BrandListCell extends React.Component {
18 constructor(props) { 20 constructor(props) {
19 - super(props);  
20 - this.dataSource = new ListView.DataSource({  
21 - rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),  
22 - }); 21 + super(props);
  22 + this.dataSource = new ListView.DataSource({
  23 + rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
  24 + });
23 } 25 }
24 26
  27 + shouldComponentUpdate(nextProps){
  28 + if (Immutable.is(nextProps.resource, this.props.resource)) {
  29 + return false;
  30 + } else {
  31 + return true;
  32 + }
  33 + }
  34 +
25 _pressRow(rowData){ 35 _pressRow(rowData){
26 this.props.onPressBrandItem(rowData.url) 36 this.props.onPressBrandItem(rowData.url)
27 } 37 }
@@ -39,7 +49,7 @@ export default class BrandListCell extends React.Component { @@ -39,7 +49,7 @@ export default class BrandListCell extends React.Component {
39 resizeMode={'contain'} 49 resizeMode={'contain'}
40 ></Image> 50 ></Image>
41 </View> 51 </View>
42 - <View style={styles.textV}> 52 + <View style={styles.textV}>
43 <Text style={styles.text} numberOfLines={1}> 53 <Text style={styles.text} numberOfLines={1}>
44 {rowData.name} 54 {rowData.name}
45 </Text> 55 </Text>
@@ -127,34 +127,36 @@ export default class BrandProductFilter extends React.Component { @@ -127,34 +127,36 @@ export default class BrandProductFilter extends React.Component {
127 } 127 }
128 } 128 }
129 return ( 129 return (
130 - <TouchableOpacity activeOpacity={1} onPress={() => {  
131 -  
132 - let filters = this.state.filters;  
133 - let filter = this.state.filters[rowID];  
134 - if (filter.radio) {  
135 - this.props.onPressFilter && this.props.onPressFilter(filters[0].key);  
136 - return;  
137 - }  
138 - if (rowID == 3) {  
139 - let value = 'filter'; 130 + <View style={{backgroundColor: 'white'}}>
  131 + <TouchableOpacity style={{backgroundColor: 'white', flex: 1}} onPress={() => {
  132 +
  133 + let filters = this.state.filters;
  134 + let filter = this.state.filters[rowID];
  135 + if (filter.radio) {
  136 + this.props.onPressFilter && this.props.onPressFilter(filters[0].key);
  137 + return;
  138 + }
  139 + if (rowID == 3) {
  140 + let value = 'filter';
  141 + this.props.onPressFilter && this.props.onPressFilter(value);
  142 + return;
  143 + }
  144 + filter.isAsc = !filter.isAsc;
  145 + filters[rowID] = filter;
  146 + this.setState({
  147 + selectedIndex: rowID,
  148 + filters,
  149 + });
  150 +
  151 + let value = filter.isAsc ? filter.value['asc'] : filter.value['desc'];
140 this.props.onPressFilter && this.props.onPressFilter(value); 152 this.props.onPressFilter && this.props.onPressFilter(value);
141 - return;  
142 - }  
143 - filter.isAsc = !filter.isAsc;  
144 - filters[rowID] = filter;  
145 - this.setState({  
146 - selectedIndex: rowID,  
147 - filters,  
148 - });  
149 -  
150 - let value = filter.isAsc ? filter.value['asc'] : filter.value['desc'];  
151 - this.props.onPressFilter && this.props.onPressFilter(value);  
152 - }}>  
153 - <View key={'row' + rowID} style={styles.rowContainer}>  
154 - <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>  
155 - {this._renderImage(rowData, rowID)}  
156 - </View>  
157 - </TouchableOpacity> 153 + }}>
  154 + <View key={'row' + rowID} style={styles.rowContainer}>
  155 + <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
  156 + {this._renderImage(rowData, rowID)}
  157 + </View>
  158 + </TouchableOpacity>
  159 + </View>
158 ); 160 );
159 } 161 }
160 162
@@ -52,32 +52,42 @@ export default class BrandStoreFilter extends React.Component { @@ -52,32 +52,42 @@ export default class BrandStoreFilter extends React.Component {
52 }; 52 };
53 } 53 }
54 54
  55 + shouldComponentUpdate(nextProps){
  56 + if (nextProps.selectID == this.props.selectID) {
  57 + return false;
  58 + } else {
  59 + return true;
  60 + }
  61 + }
  62 +
55 _renderRow(rowData, sectionID, rowID) { 63 _renderRow(rowData, sectionID, rowID) {
56 64
57 let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'}; 65 let colorStyle = rowID == this.state.selectedIndex ? {color: '#444444'} : {color: '#b0b0b0'};
58 66
59 return ( 67 return (
60 - <TouchableOpacity onPress={() => {  
61 - let filters = this.state.filters;  
62 - let filter = this.state.filters[rowID];  
63 - if (this.state.selectedIndex == rowID) {  
64 - return;  
65 - }  
66 -  
67 - filter.isSelect = !filter.isSelect;  
68 - filters[rowID] = filter;  
69 - if (rowID != 3) {  
70 - this.setState({  
71 - selectedIndex: rowID,  
72 - filters,  
73 - });  
74 - }  
75 - this.props.onPressFilter && this.props.onPressFilter(rowID);  
76 - }}>  
77 - <View key={'row' + rowID} style={styles.rowContainer}>  
78 - <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>  
79 - </View>  
80 - </TouchableOpacity> 68 + <View style={{backgroundColor: 'white'}}>
  69 + <TouchableOpacity onPress={() => {
  70 + let filters = this.state.filters;
  71 + let filter = this.state.filters[rowID];
  72 + if (this.state.selectedIndex == rowID) {
  73 + return;
  74 + }
  75 +
  76 + filter.isSelect = !filter.isSelect;
  77 + filters[rowID] = filter;
  78 + if (rowID != 3) {
  79 + this.setState({
  80 + selectedIndex: rowID,
  81 + filters,
  82 + });
  83 + }
  84 + this.props.onPressFilter && this.props.onPressFilter(rowID);
  85 + }}>
  86 + <View key={'row' + rowID} style={styles.rowContainer}>
  87 + <Text style={[styles.name, colorStyle]}>{rowData.name}</Text>
  88 + </View>
  89 + </TouchableOpacity>
  90 + </View>
81 ); 91 );
82 } 92 }
83 93
@@ -90,12 +100,10 @@ export default class BrandStoreFilter extends React.Component { @@ -90,12 +100,10 @@ export default class BrandStoreFilter extends React.Component {
90 100
91 render() { 101 render() {
92 102
93 - let {style} = this.props;  
94 -  
95 return ( 103 return (
96 - <View style={[styles.container, style]}> 104 + <View style={[styles.container]}>
97 <ListView 105 <ListView
98 - contentContainerStyle={[styles.contentContainer, style]} 106 + contentContainerStyle={[styles.contentContainer]}
99 enableEmptySections={true} 107 enableEmptySections={true}
100 dataSource={this.dataSource.cloneWithRows(this.state.filters)} 108 dataSource={this.dataSource.cloneWithRows(this.state.filters)}
101 renderRow={this._renderRow} 109 renderRow={this._renderRow}
@@ -14,6 +14,8 @@ const { @@ -14,6 +14,8 @@ const {
14 Platform, 14 Platform,
15 } = ReactNative; 15 } = ReactNative;
16 16
  17 +import Immutable, {Map} from 'immutable';
  18 +
17 export default class BrandSwiper extends React.Component { 19 export default class BrandSwiper extends React.Component {
18 20
19 constructor(props) { 21 constructor(props) {
@@ -45,6 +47,14 @@ export default class BrandSwiper extends React.Component { @@ -45,6 +47,14 @@ export default class BrandSwiper extends React.Component {
45 />; 47 />;
46 } 48 }
47 49
  50 + shouldComponentUpdate(nextProps){
  51 + if (Immutable.is(nextProps.resource, this.props.resource)) {
  52 + return false;
  53 + } else {
  54 + return true;
  55 + }
  56 + }
  57 +
48 render() { 58 render() {
49 59
50 let {resource} = this.props; 60 let {resource} = this.props;
@@ -14,6 +14,8 @@ const { @@ -14,6 +14,8 @@ const {
14 TouchableOpacity, 14 TouchableOpacity,
15 } = ReactNative; 15 } = ReactNative;
16 16
  17 +import Immutable, {Map} from 'immutable';
  18 +
17 export default class CouponCell extends React.Component { 19 export default class CouponCell extends React.Component {
18 constructor(props) { 20 constructor(props) {
19 super(props); 21 super(props);
@@ -25,6 +27,14 @@ export default class CouponCell extends React.Component { @@ -25,6 +27,14 @@ export default class CouponCell extends React.Component {
25 }; 27 };
26 } 28 }
27 29
  30 + shouldComponentUpdate(nextProps){
  31 + if (Immutable.is(nextProps.resource, this.props.resource)) {
  32 + return false;
  33 + } else {
  34 + return true;
  35 + }
  36 + }
  37 +
28 renderRow(rowData,sectionID,rowID,highlightRow) { 38 renderRow(rowData,sectionID,rowID,highlightRow) {
29 39
30 let data = this.props.resource.toJS(); 40 let data = this.props.resource.toJS();
@@ -14,7 +14,7 @@ const { @@ -14,7 +14,7 @@ const {
14 Platform, 14 Platform,
15 } = ReactNative; 15 } = ReactNative;
16 16
17 -import {Map} from 'immutable'; 17 +import Immutable, {Map} from 'immutable';
18 import BrandProductListCell from '../../../../../common/components/ListCell/ProductListCell'; 18 import BrandProductListCell from '../../../../../common/components/ListCell/ProductListCell';
19 import DeviceInfo from 'react-native-device-info'; 19 import DeviceInfo from 'react-native-device-info';
20 20
@@ -31,8 +31,12 @@ export default class HotProducts extends React.Component { @@ -31,8 +31,12 @@ export default class HotProducts extends React.Component {
31 }); 31 });
32 } 32 }
33 33
34 - componentDidMount() {  
35 - 34 + shouldComponentUpdate(nextProps){
  35 + if (Immutable.is(nextProps.resource, this.props.resource)) {
  36 + return false;
  37 + } else {
  38 + return true;
  39 + }
36 } 40 }
37 41
38 renderRow(rowData,sectionID,rowID,highlightRow) { 42 renderRow(rowData,sectionID,rowID,highlightRow) {
@@ -11,13 +11,20 @@ const { @@ -11,13 +11,20 @@ const {
11 TouchableOpacity, 11 TouchableOpacity,
12 } = ReactNative; 12 } = ReactNative;
13 13
  14 +import Immutable, {Map} from 'immutable';
  15 +
14 export default class OneRowTwoColImages extends React.Component { 16 export default class OneRowTwoColImages extends React.Component {
15 17
16 constructor(props) { 18 constructor(props) {
17 super (props); 19 super (props);
18 } 20 }
19 21
20 - componentDidMount() { 22 + shouldComponentUpdate(nextProps){
  23 + if (Immutable.is(nextProps.resource, this.props.resource)) {
  24 + return false;
  25 + } else {
  26 + return true;
  27 + }
21 } 28 }
22 29
23 render() { 30 render() {
@@ -25,6 +32,7 @@ export default class OneRowTwoColImages extends React.Component { @@ -25,6 +32,7 @@ export default class OneRowTwoColImages extends React.Component {
25 if (this.props.resource.size == 0) { 32 if (this.props.resource.size == 0) {
26 return null; 33 return null;
27 } 34 }
  35 +
28 let data = this.props.resource.toJS(); 36 let data = this.props.resource.toJS();
29 return ( 37 return (
30 <View style={styles.viewStyle}> 38 <View style={styles.viewStyle}>
@@ -14,8 +14,8 @@ const { @@ -14,8 +14,8 @@ const {
14 Platform, 14 Platform,
15 } = ReactNative; 15 } = ReactNative;
16 16
17 -import {Map} from 'immutable';  
18 import DeviceInfo from 'react-native-device-info'; 17 import DeviceInfo from 'react-native-device-info';
  18 +import Immutable, {Map} from 'immutable';
19 19
20 export default class Recommend extends React.Component { 20 export default class Recommend extends React.Component {
21 21
@@ -30,6 +30,14 @@ export default class Recommend extends React.Component { @@ -30,6 +30,14 @@ export default class Recommend extends React.Component {
30 }); 30 });
31 } 31 }
32 32
  33 + shouldComponentUpdate(nextProps){
  34 + if (Immutable.is(nextProps.resource, this.props.resource)) {
  35 + return false;
  36 + } else {
  37 + return true;
  38 + }
  39 + }
  40 +
33 renderRow(rowData, sectionID, rowID, highlightRow) { 41 renderRow(rowData, sectionID, rowID, highlightRow) {
34 return ( 42 return (
35 <TouchableOpacity activeOpacity={0.5} onPress={() => { 43 <TouchableOpacity activeOpacity={0.5} onPress={() => {