React Native ListView不会重新呈现大数据 [英] React Native ListView doesn't rerender for large data

问题描述

如果列表具有较大的数据源，则在调用this.setState之后，React Native ListView将不会重新渲染其行，即如果我的行数很少(1到9)，则一切正常，但是如果我添加更多的数据，则re -渲染不会发生.

React Native ListView won't re-render its rows after calling this.setState if list has large data source i.e. everything works correctly if I have few rows (1 to 9), but if I add more data, then the re-rendering won't happen.

关于此主题也有类似的帖子，但是我找不到能解决此问题的任何帖子.

There are similar posts about this topic, but I didn't find any that tackled exactly this problem.

这是一些简化的示例代码:

Here is some simplified sample code:

render() {
    return (
        <View style={Styles.listContainer}>
            <ListView
                dataSource={this.state.triggerDataSource}
                enableEmptySections={true}
                renderRow={(data) => this._renderListRow(data)}
                renderHeader={() => this._renderListHeader()}/>
        </View>
    );
}

...

_renderListRow(data) {
    return (
        <View style={Styles.listRow}>
            {this._renderX(data)}
            <View style={Styles.listItem}>
                <Text style={Styles.listLabel}>{data.symbol}</Text>
            </View>
        </View>
    );
}

...

_renderX(data) {
    if (this.state.isShowing) {
        return (
            <Button>
                Some button
            </Button>
        );
    } else {
        return null;
    }
}

如果ListView数据源相对较小，则调用this.setState({isShowing: true});将触发重新渲染，并且每行现在都将包含Button，但是当我添加更多数据时，更改状态不会执行任何操作.

If the ListView datasource is relatively small, then calling this.setState({isShowing: true}); will trigger re-render and each of the rows will now contain the Button, but when I add more data, then changing state does nothing.

我的解决方案部分有效(例如，用于较小的数据大小)-我想知道如果数据大小增加，ListView功能为何以及如何更改.建议的答案不能完全回答这个问题.如果行数达到10，我的代码将停止工作.如果低于10，则一切正常.

My solution is partially working (i.e. for small data size) - I would like to know why and how the ListView functionality changes if the data size increases. Suggested answers don't answer exactly this question. My code stops working if the row count reaches 10. If it's below then everything works just fine.

推荐答案

使用以下方法找到解决方案:

Find the way to solve it with this:

ReactNative ListView组件使用initialListSize属性计算在初始组件安装时要呈现的行数.默认情况下，initialListSize设置为10.

ReactNative ListView component calculates how many rows to render on initial component mount using initialListSize property. By default the initialListSize is set to 10.

作为参考，请参见ReactNative ListView源代码中的以下函数，

For reference, See the below function from ReactNative ListView source code,

 var DEFAULT_INITIAL_ROWS = 10;      
  getDefaultProps: function() {
    return {
      initialListSize: DEFAULT_INITIAL_ROWS,
      pageSize: DEFAULT_PAGE_SIZE,
      renderScrollComponent: props => <ScrollView {...props} />,
      scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
      onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
      stickyHeaderIndices: [],
    };
  }

这篇关于React Native ListView不会重新呈现大数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！