多次渲染组件时,我在 React Native 中遇到了非常缓慢的性能。我有一组对象,其中包含组件要使用的信息。目前该数组有大约 17 个对象,因此同一个组件将在 ScrollView 中显示 17 次。<PreviousComponent />
从 切换到时,JS 帧速率下降到 -2 fps <Container />
。我只是展示与问题相关的代码块,用于解释目的。另请注意,我使用的导航是来自 react-community 的 react-navigation。<EachCard />
是另一个包含一些 Text 和 View 组件的组件。我想我使用的方法是标准的。
我阅读了性能页面https://facebook.github.io/react-native/docs/performance.html。我没有console.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>
);
}
}