我的应用程序中有 113 条记录。react 本机 listView 需要 3 多秒才能呈现所有行。我怎样才能让它高效，这样时间消耗可以最小化，应用程序体验可以流畅。我已经在 ios 中检查了相同的应用程序，与 react-native 应用程序版本相比，它效率更高。我在每一行都有一个头像图像和名称和按钮。
这是我的列表视图代码
var Ziglist = React.createClass({
getInitialState: function() {
return {
isLoading: true,
resultsData: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 != row2 }),
};
},
componentWillMount: function(){
PeopleStore.listen(this.onChange);
PeopleActions.getPeopleFollowing();
},
componentWillUnmount() {
PeopleStore.unlisten(this.onChange);
},
onChange(state) {
this.setState({resultsData: this.getDataSource(state.resultsData)})
},
getDataSource: function(mediaItem: Array<any>): ListView.dataSource {
return this.state.resultsData.cloneWithRows(mediaItem)
},
render: function() {
return (
<View style={{flex: 1}} >
<ListView
dataSource={this.state.resultsData}
renderRow={this.renderRow}
renderSeperator={this.renderSeperator}
contentInset={{top: 0}}
automaticallyAdjustContentInsets={false}
/>
<Button
containerStyle={styles.goAhead}
style={styles.base}
onPress={() => this.onStartPress()}>
<Text style={[styles.base,styles.go]}>Ok, Lets GO > </Text>
</Button>
</View>
);
},
renderSeparator: function (sectionID: number |
string, rowID: number | string, adjacentRowHighlighted: boolean ) {
return (
<View key={"SEP_" + sectionID + "_" + rowID} />
);
},
renderRow: function (
media: Object,
sectionID: number | string,
rowID: number | string,
highlightRowFunction: (sectionID: ?number | string,
rowID: ?number | string) => void,) {
return (
<CelebrityRow
media={media}
onSelect={() => this.selectMediaItem(media)}
onHighlight={() => highlightRowFunction(sectionID,rowID)}
onDeHighlight={() => highlightRowFunction(null,null)}
/>
);
},
selectMediaItem: function (mediaItem) {
this.props.navigator.push({
name: 'celebrityDetailView',
passProps: {
mediaItem: mediaItem
}
});
}
这是名人行的代码
var CelebrityRow = React.createClass({
getInitialState: function() {
return {
following_ids: FollowingStore.getState().following_ids,
unfollowing_ids: FollowingStore.getState().unfollowing_ids,
icon: null,
follow: true
}
},
componentWillMount: function() {
if (_.indexOf(this.state.unfollowing_ids, this.props.media.id) > -1) {
this.setState({
follow: !this.state.follow
});
}
},
componentWillUnmount: function() {},
componentDidMount: function() {
var _unfollowing_ids = FollowingStore.getState().unfollowing_ids;
if (_unfollowing_ids.length > 0 && this.state.follow === false) {
var following_arr = PeopleStore.getState().resultsData;
var _following_ids = FollowingStore.getState().following_ids;
_.each(_unfollowing_ids, function(id) {
var find = _.findWhere(following_arr, {
id: id
});
following_arr = _.without(following_arr, find);
});
var following_ids = _.difference(_following_ids, _unfollowing_ids);
this.setState({
unfollowing_ids: [],
following_ids: following_ids
});
var _this = this;
setTimeout(function() {
FollowingActions.updateFollowingIdsWithStorage(following_ids);
FollowingActions.updateUnFollowingIds([]);
PeopleActions.updatePeopleFollowingWithStorage(following_arr);
_this.setState({
follow: true
})
}, 1000);
}
},
onChange: function(state) {
// this.setState({unfollowing_ids: state.unfollowing_ids});
},
onAddPress: function(media) {
this.setState({
follow: !this.state.follow
});
FollowingActions.updateUnFollowingIds(media.id);
},
render: function() {
return ( <
View style = {
styles.row
} >
<
TouchableHighlight onPress = {
this.props.onSelect
}
onShowUnderlay = {
this.props.onHighlight
}
onHideUnderlay = {
this.props.onDeHighlight
} >
<
View style = {
styles.cellContainer
} >
<
Image source = {
{
uri: this.props.media.avatar_url
}
}
style = {
styles.cellImage
}
/> <
Text style = {
styles.CelebrityName
}
numberOfLines = {
1
} > {
this.props.media.name
} < /Text>
<
View style = {
styles.celebrityAdd
} >
<
Button onPress = {
() => this.onAddPress(this.props.media)
} > {
(this.state.follow ?
( <
Image source = {
require("../assets/tick-mark.png")
}
style = {
styles.addIcon
}
/>
) : ( <
Image source = {
require("../assets/img-small-add.png")
}
style = {
styles.removeIcon
}
/>
)
)
} <
/Button> <
/View>
<
/View> <
/TouchableHighlight> <
/View>
);
}
});