在React Native中显示多个组件的性能方法

Question

我在多次渲染组件时面对反应本机的非常缓慢的性能。我有一系列对象，其中包括组件要消耗的信息。目前，该数组有大约17个对象，因此同一组件将在滚动浏览中显示17次。从<PreviousComponent />切换到<Container />时，JS帧速率降至-2 fps。我只是显示了与问题相关的代码片段，它是出于解释目的。另一个注意事项，我正在使用的导航是反应 - 社区的反应行动。<EachCard />是另一个具有几个文本和查看组件的组件。我想我使用的方法是标准的方法。

我阅读了性能页面https://facebook.github.io/reaeact-native/docs/performance.html。我没有控制台。log，也将开发模式设置为false。

为什么JS FPS降至-2，为什么要加载17个组件需要几秒钟？我正在使用真实的设备（LG G4 @6.0）

class PreviousComponent extends React.Component {
render(){
    return(
        <Button onPress={()=> this.props.navigate('Container', {info: listings})} title="Go to Container" />
    );
  }
}
class Container extends React.Component {
render(){
    const { params }= this.props.navigation.state;
    let results = params.info.map((each) =>
        <EachCard name={each.name} position={each.position} etc1={each.etc1}  etc2={each.etc2}/>
    );
    return (
        <View>
            <ScrollView>
              {results}
            <ScrollView>
        </View>
    );
  }
}

Answer 1

1. 在scrollview上使用flatlist，将initialnumtorender = {numbers} prop添加到flatlist，因为它将仅显示在屏幕上可见并拆下其他组件的组件。

2. 在flatlist RenderItem中使用Purecomponent（在您的情况下，它将每张卡），以便它们只有在更改道具时才会渲染。

3. 检查您的组件是否一次又一次重新渲染（要测试呈现键盘（）或ComponentWillRecieveProps中的控制台），如果发生这种情况，请使用shooksponentupdate。

我认为实施这三个点会解决您的问题。

Answer 2

建议将flatlist或listView用于任何类型的列表组件。它们是针对性能进行了优化的，并且具有内置的内存使用优化