Question

我实现了一个React Native FlatList，但每当我将一个元素推送到FlatList数据时，FlatList的每个子节点都会被重新渲染两次

有没有办法只渲染 new 元素而不是整个FlatList？

我认为这是因为我渲染的组件的日期道具发生了变化，触发了第一次重新渲染，然后整个FlatList依赖于this.props.store.dates，整个FlatList重新渲染第二次。

以下是我实现FlatList的方法：

@inject("store")
@observer
class Agenda extends Component {
  render() {
    return (
      <FlatList
        data={toJS(this.props.store.dates)}
        renderItem={({ item }) => <DayInAgenda date={item} />}
        keyExtractor={(item) => { return item } }
      />
    );
  }
}

以下是我实施Mobx商店的方式：

export default class Store {
  @observable dates = [
    "2019-05-10",
    "2020-05-17",
    "2021-05-18",
  ]

  @action addDate(date) {
    this.dates.push(date)
  }
}

Answer 1

好的，我所要做的就是让DayInAgenda成为观察者。

如何只在一个值发生变化时阻止整个FlatList重新渲染

1 个答案: