Question

我有一个列表只是简单的文本，可以在本机上呈现为flatlist但我遇到的性能非常慢，这使得app无法使用。

我该如何解决这个问题？我的代码是：

<FlatList
  data={[{key: 'a'}, {key: 'b'} ... +400]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

Answer 1

以下是我的建议：

：一种。避免使用renderItem道具上的匿名箭头功能。

将initialNumToRender函数移出到渲染函数的外部，这样每次调用渲染函数时它都不会重新创建。

<强> B中。尝试在FlatList

上添加key道具

它将定义首次渲染的项目数量，它可以节省大量数据的资源。

<强>℃。在项目组件上定义key道具

简单地说，它会避免在每个项目上定义index的动态添加/删除项目上重新渲染。确保它是唯一的，不要使用keyExtractor作为密钥！您也可以使用getItemLayout作为替代方案。

<强> d。可选优化

尝试使用maxToRenderPerBatch跳过动态内容的测量。还有一些名为windowSize，// render item function, outside from class's `render()` const renderItem = ({ item }) => (<Text key={item.key}>{item.key}</Text>); // we set the height of item is fixed const getItemLayout = (data, index) => ( {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} ); const items = [{ key: 'a' }, { key: 'b'}, ...+400]; function render () => ( <FlatList data={items} renderItem={renderItem} getItemLayout={getItemLayout} initialNumToRender={5} maxToRenderPerBatch={10} windowSize={10} /> );的道具可用于限制要渲染的项目数。请参阅this thread或VirtualizedList的官方文档。

<强>电子。谈话很便宜，告诉我代码！

//under ES6 
const getUrlParamAsObject = (url = window.location.href) => {
    let searchParams = url.split('?')[1];
    const result = {};
    //in case the queryString is empty
    if (searchParams!==undefined) {
        const paramParts = searchParams.split('&');
        for(let part of paramParts) {
            let paramValuePair = part.split('=');
            //exclude the case when the param has no value
            if(paramValuePair.length===2) {
                result[paramValuePair[0]] = decodeURIComponent(paramValuePair[1]);
            }
        }

    }
    return result;
}

Answer 2

试试这个listview https://github.com/Flipkart/ReactEssentials，它渲染的项目远远少于FlatList，然后再回收它们。应该快得多。

{{1}}

Answer 3

检查此链接

Add pathname and query to the argument of getInitialProps

示例

FlatList
    containerContentStyle={styles.container}
    data={countries}
    renderItem={({ item }) => (
      <View style={styles.results}>
        <Results 
          {...this.props} 
          country={item} 
          handleUpdate={this.handleUpdate}
          pendingCountry={pendingCountry}
        />
      </View>
    )}
    keyExtractor={item => item.alpha2code}
    ListHeaderComponent={() => this.renderHeader()}

    // Performance settings
    removeClippedSubviews={true} // Unmount components when outside of window 
    initialNumToRender={2} // Reduce initial render amount
    maxToRenderPerBatch={1} // Reduce number in each render batch
    maxToRenderPerBatch={100} // Increase time between renders
    windowSize={7} // Reduce the window size
  />

Answer 4

您可以使用react-native-optimized-flatlist。它是Flatlist的优化版本。

1）通过以下方式添加此包：

npm i -S react-native-optimized-flatlist

OR

yarn add react-native-optimized-flatlist

2）将<FlatList/>替换为<OptimizedFlatlist/>

Answer 5

另一项优化是使用key道具提供keyExtractor。这非常重要。

反应原生100+项目平板表现非常慢

5 个答案: