性能优化

一 RN端长列表性能优化

1.1 性能问题

ScrollView组件在RN端使用常规方式渲染item视图时，Android端滚动非常卡顿，用户体验非常差

1.2 解决方案

特定平台的列表组件需要使用文件条件编译，单独编写组件
RN平台的列表文件中，使用ScrollView组件的renderItem属性来启动RN的FlatList内置组件，可以完美解决长列表卡顿问题

render() {
    const {datas} = this.props
    return (
      <ScrollView
        className={scrollWarp}
        style={{height}}
        data={datas}
        renderItem={({item,index}) =>
          <View className={'itemWrap'}>
            <Item item={item} index={index} key={index} />
            {datas.length > 0 && index === datas.length-1 && <Text className='list__btmLoading'>正在加载中...</Text>}
          </View>
        }
        scrollY
        keyExtractor = {(item,index) => `${index}`}
        onScrollToUpper={this.onScrollToUpper.bind(this)}
        onScrollToLower={this.onScrollToLower.bind(this)} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
      />
    )
  }

二 展示组件使用PureComponent代替Component

PureCompoent是一个更具性能的Component的版本
PureComponent通过prop和state的浅比较来实现shouldComponentUpdate，在展示类组件中性能更佳。
PureComponent不仅会影响本身，而且会影响子组件
如果组件的prop和state每次都必然会变，那么PureComponent的效率不如Component