FlatList 组件性能优化理解

FlatList 之所以节约内存、渲染快，是因为它只将用户看到的(和即将看到的)部分真正渲染出来了。而用户看不到的地方，渲染的只是空白元素。渲染空白元素相比渲染真正的列表元素需要内存和计算量会大大减少，这就是性能好的原因。

优化FlatList列表性能方法我总结为三种：

1、getItemLayout

可选优化项。但是实际测试中，如果不做该项优化，性能会差很多。所以强烈建议做此项优化！
如果不做该项优化，每个列表都需要事先渲染一次，动态地取得其渲染尺寸，然后再真正地渲染到页面中。

如果预先知道列表中的每一项的高度(ITEM_HEIGHT)和其在父组件中的偏移量(offset)和位置(index)，就能减少一次渲染。这是很关键的性能优化点。

      /*
      * length: 是被渲染 item 的高度。
      * offset(偏移量)
      * 注意如果你指定了ItemSeparatorComponent，请把分隔线的尺寸也考虑到 offset 的计算之中。
      */     
     _getItemLayout = (data, index) => (
          {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
        )

      <FlatList
        data = {this.state.listData}
        renderItem={this.renderItem}
        getItemLayout={this._getItemLayout}
      />

2、removeClippedSubviews（注意：有些情况下会有 bug（比如内容无法显示）。请谨慎使用。）

一个将“剪裁子视图”(clipped subviews)（指的是那些在父视图之外的视图）从视图层级中删除的本地优化，为的是减轻渲染系统的工作负担。但是这些被剪裁掉的子视图依然保留在内存中，所以它们所占的储存空间没有被释放，内部状态也都保留了下来。

设置为true，这可能会极大的改善长列表的滑动性能。

3、利用PureComponent来进一步优化性能和减少bug产生的可能

先写一个列表MyListItem组件，其onPressItem属性使用箭头函数而非 bind 的方式进行绑定，使其不会在每次列表重新 render 时生成一个新的函数，从而保证了 props 的不变性（当然前提是 id、selected和title也没变），不会触发自身无谓的重新 render。换句话说，如果你是用 bind 来绑定onPressItem，每次都会生成一个新的函数，导致 props 在===比较时返回 false，从而触发自身的一次不必要的重新 render。

给FlatList指定extraData={this.state}属性，是为了保证state.selected变化时，能够正确触发FlatList的更新。如果不指定此属性，则FlatList不会触发更新，因为它是一个PureComponent，其 props 在===比较中没有变化则不会触发更新。

keyExtractor属性指定使用 id 作为列表每一项的 key。

借用官方文档例子：

class MyListItem extends React.PureComponent {
  _onPress = () => {
    this.props.onPressItem(this.props.id);
  };

  render() {
    const textColor = this.props.selected ? "red" : "black";
    return (
      <TouchableOpacity onPress={this._onPress}>
        <View>
          <Text style={{ color: textColor }}>
            {this.props.title}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}

class MultiSelectList extends React.PureComponent {
  state = {selected: (new Map(): Map<string, boolean>)};

  _keyExtractor = (item, index) => item.id;

  _onPressItem = (id: string) => {
    // updater functions are preferred for transactional updates
    this.setState((state) => {
      // copy the map rather than modifying state.
      const selected = new Map(state.selected);
      selected.set(id, !selected.get(id)); // toggle
      return {selected};
    });
  };

  _renderItem = ({item}) => (
    <MyListItem
      id={item.id}
      onPressItem={this._onPressItem}
      selected={!!this.state.selected.get(item.id)}
      title={item.title}
    />
  );

  render() {
    return (
      <FlatList
        data={this.props.data}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    );
  }
}

END

aijason

发布了36 篇原创文章 · 获赞 64 · 访问量 5万+

私信关注

FlatList 组件性能优化理解

猜你喜欢