在 React Native 中显示多个组件的高效方式

Question

在多次渲染一个组件时，我遇到了 React Native 性能非常慢的问题。我有一组对象，其中包含组件要使用的信息。现在数组有大约 17 个对象，所以同一个组件将在 ScrollView 中显示 17 次。当从 <PreviousComponent /> 切换到 <Container /> 时，JS 帧率下降到 -2 fps。我只是展示与问题相关的代码块，用于解释目的。另外请注意，我使用的导航是来自 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>
    );
  }
}

Answer 1

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

Answer 2

在 Scrollview 上使用 Flatlist，将 initialNumToRender={number} 属性添加到 Flatlist，因为它将仅显示那些在屏幕上可见的组件并分离其他组件。
在 Flatlist renderItem 中使用 PureComponent（在您的情况下它将是每张卡片），这样它们只会在道具发生变化时渲染。
检查您的组件是否一次又一次地 re-rendering（以测试将控制台放在 render() 或 ComponentWillRecieveProps 中）如果发生这种情况，则使用 ShouldComponentUpdate。

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

在 React Native 中显示多个组件的高效方式

Performant way to display multiple components in React native

reactjs

react-native

react-navigation