Redux ListView 在操作分派后不会重新渲染内容

Question

我使用的 redux 几乎与异步 reddit redux 示例完全相同，使用 thunk 中间件仅在需要时更新状态 (shouldFetch)。有没有人注意到，在网络调用更新存储后，React-Native ListView 无法捕获更改？如果我导航离开并返回，看起来很好。只是在网络调用（来自之前的路线）之后它才不会出现。

我的ListView.js

constructor(props) {
  super(props)
  let dataSource = new ListView.DataSource({
    sectionHeaderHasChanged: this.sectionHeaderHasChanged,
    rowHasChanged: (row1, row2) => row1 !== row2,
  });

  this.state = {
    dataSource: dataSource.cloneWithRows(this.props.books),
  }

  this.renderRow = this.renderRow.bind(this);
  this.selectBook = this.selectBook.bind(this);
}

selectBook(book) {
  this.props.selectBook(book)
}

goTo(route) {
  this.props.navigator.push({
    name: route,
  });
}
... + everything you'd expect

Answer 1

这里主要的理解是，像 flatlist 和sectionlist 这样的 listview 元素是 pureComponent，这意味着当 props 改变时它们不会重新渲染。因此，为了克服这个问题，我们需要向列表视图组件传递一个额外的字段，即“extraData”。请参阅此链接以获取详细文档。

奖励积分 https://reactnative.dev/docs/performance#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists