Question

在多次渲染组件时，我在React Native中遇到了非常慢的性能。我有一个对象数组，其中包含Component要使用的信息。目前，该数组有大约17个对象，因此相同的组件将在ScrollView中显示17次。从<PreviousComponent />切换到<Container />时，JS帧速率降至-2 fps。我只是展示了与问题相关的代码块，这是出于解释目的。另一个注意事项，我正在使用的导航是来自react-community的反应导航。 <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>
    );
  }
}

Answer 1

在Scrollview上使用Flatlist，将initialNumToRender = {number} prop添加到Flatlist，因为它只显示屏幕上可见的组件并分离其他组件。
在Flatlist中使用PureComponent renderItem（在你的情况下它将是每张Card），这样它们只会在道具改变时呈现。
检查您的组件是否一次又一次地重新渲染（如果发生这种情况，则在render（）或ComponentWillRecieveProps中测试put控制台），然后使用ShouldComponentUpdate。

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

Answer 2

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

在React native中显示多个组件的高效方法

2 个答案: