反應原生100+項目flatlist非常緩慢的性能

Question

我有一個列表只是簡單的文本，呈現到平原上反應本地，但我遇到非常非常慢的性能，使應用程序無法使用。

我該如何解決這個問題？我的代碼是：

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

Answer 1

你可以做一些改進，如：

1. 搬出renderItem功能渲染功能之外，因此它不會重新創建它每次渲染功能調用。
2. 嘗試添加initialNumToRender道具
3. 可選的優化，儘量使用getItemLayout跳過

示例代碼動態內容的測量：

const renderItem = ({item}) => (<Text>{item.key}</Text>); 
 

 
const getItemLayout = (data, index) => (
 
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} 
 
); 
 

 
function render() => (
 
    <FlatList 
 
    data={[{key: 'a'}, {key: 'b'} ... +400]} 
 
    renderItem={renderItem} 
 
    getItemLayout={getItemLayout} 
 
    initialNumToRender={5} 
 
    /> 
 
);

https://facebook.github.io/react-native/docs/flatlist.html

Answer 2

試一下這個列表視圖https://github.com/Flipkart/ReactEssentials，它比FlatList呈現的物品少得多，然後再循環它們。應該快得多。

npm install --save recyclerlistview