Javascript React本机嵌套平面列表性能差

我有一个嵌套的平面列表，用户可以垂直和水平滚动。外部展开列表是水平的，内部展开列表是垂直的。我注意到垂直控制台经常被打印。我能够在一个更简单的例子中重现这个问题。对于这个简单的示例，性能非常差，如果水平滚动太多次，屏幕就会变成白色。请随意克隆repo并运行应用程序，只有一个名为app.js的文件包含真正的代码，因此非常简单。我想知道为什么React Native的表现如此糟糕

App.js

const DATA = generate(40);

function generate(val) {
  return new Array(val).fill().map((e, i) => {
    return data(i + 1);
  });
}

function data(page) {
  switch (page) {
    case 1:
      return require('./data/1.json');
    // more cases go from 2 -> 40
    case 40:
      return require('./data/40.json');
  }
}

function App() {
  console.log('Horizontal')
  return (
      <FlatList
        data={DATA} // DATA is a nested array
        style={styles.appContainer}
        renderItem={subList}
        horizontal
        pagingEnabled
        windowSize={1}
        keyExtractor={(item, index) => {
          return index.toString();
        }}
      />
  );
};

const subList = (props) => {
  console.log('Vertical')
  return (
    <FlatList
      data={props.item}
      style={styles.flatRow}
      renderItem={renderItem}
      initialNumToRender={20}
      windowSize={2}
      keyExtractor={(item, index) => {
        return index.toString();
      }}
    />
  );
};

function Line(props) {
  const {email, first_name} = props.item.item;
  return (
    <View style={styles.line}>
      <Text style={styles.textFont}>{first_name}</Text>
      <Text style={styles.subtitleFont}>{email}</Text>
    </View>
  );
}

const renderItem = (props) => <Line item={props} />;

const DATA=generate（40）；
函数生成（val）{
返回新数组（val）.fill（）.map（（e，i）=>{
返回数据（i+1）；
});
}
功能数据（第页）{
交换机（第页）{
案例1：
返回require（'./data/1.json'）；
//更多案例从2->40开始
案例40：
返回require（'./data/40.json'）；
}
}
函数App（）{
console.log（'Horizontal'）
返回(
{
返回索引.toString（）；
}}
/>
);
};
常量子列表=（道具）=>{
console.log（'Vertical'））
返回(
{
返回索引.toString（）；
}}
/>
);
};
功能线（道具）{
const{email，first_name}=props.item.item；
返回(
{名字}
{email}
);
}
常量renderItem=（道具）=>；

我认为这篇文章对你帮助很大。是的，我在网上读了几篇类似的文章，但找不到真正的解决方案。未使用内嵌箭头函数进行渲染，此处没有图像，maxToRenderPerBatch没有帮助：（，尝试了WindowsSize，但没有帮助，无法使用getItemLayout，因为每个单元格在实际应用中都是动态高度，使用keyextractor，我想我尝试了memo，但也没有成功。可能react native不适合此用例？您没有使用renderItem的useCallback（子列表）你没有使用useCallback for KeyExtractorTanks来提供@SoftDev的建议。没有产生太大影响tho:（我认为这篇文章对你帮助很大。是的，我在网上读了几篇类似的文章，但找不到真正的解决方案。没有使用内嵌箭头函数进行渲染，这里没有图像，maxToRenderPerBatch没有帮助：（，尝试了WindowsSize，但没有帮助，无法使用getItemLayout，因为每个单元格在实际应用中都是动态高度，使用keyextractor，我想我尝试了memo，但也没有成功。可能react native不适合此用例？您没有使用renderItem的useCallback（子列表）您没有将useCallback for KeyExtractorTanks用于@SoftDev的建议。对以下方面没有太大影响：(