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

在多次渲染组件时，React Native的性能非常慢。我有一个包含组件要使用的信息的对象数组。目前，该数组大约有17个对象，因此同一组件将在ScrollView中显示17次。从

切换到

时，JS帧速率降至-2 fps。我只是展示与问题相关的代码块，这是为了解释。另一个注意事项是，我使用的导航是来自react社区的react导航<代码>是另一个包含一些文本和视图组件的组件。我想我使用的方法是标准的

我读了性能页面。我没有console.log，还将开发模式设置为false

那么为什么JSFPS会降到-2，为什么加载17个组件需要几秒钟？我使用的是真正的设备（LG G4@6.0）

class-PreviousComponent扩展了React.Component{
render（）{
返回(
this.props.navigate（'Container'，{info:listings}）}title=“转到Container”/>
);
}
}
类容器扩展了React.Component{
render（）{
const{params}=this.props.navigation.state；
让结果=params.info.map（（每个）=>
);
返回(
{results}
);
}
}

建议对任何类型的列表组件使用FlatList或ListView。它们针对性能进行了优化，并具有内置内存使用优化功能

在Scrollview上使用Flatlist，将initialNumToRender={number}prop添加到Flatlist，因为它将仅显示屏幕上可见的组件，并分离其他组件

在Flatlist renderItem中使用PureComponent（在您的情况下，它将显示每张卡），这样他们只会在道具更改时渲染

检查您的组件是否一次又一次地重新呈现（在render（）或ComponentWillReceiveProps中测试put控制台），如果发生这种情况，请使用ShouldComponentUpdate

---

我认为实现这三点可以解决您的问题。

尝试使用listview而不是scrollview重写。它的性能优化了很多。这些组件中有没有动画、繁重的图形或异步api调用？或者它们只包含一些静态的东西？你能在这里共享组件的代码吗？

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>
    );
  }
}