我的application.react本机listView中有113条记录需要3秒多的时间来渲染所有行.我怎样才能使它高效,因此时间消耗可以最小化,应用体验可以顺利进行.我在ios中检查了相同的应用程序,与react-native app版本相比,它的效率非常高.我每行都有一个头像图像和名称和按钮.
这是我的listview代码
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,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 } }); }
这是Celebrity Row的代码
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> ); }
});
您可以设置initialListSize prop来提高渲染性能,而不是一次渲染整个100行.