React-native: 关于“rowHasChanged”和 ListView 渲染的困惑

创建于 2016-02-04 · 3评论 · 资料来源: facebook/react-native

大家好，

在进行一些性能改进时，我发现在我们的任何列表中都没有调用rowHasChanged 。这些列表是无限滚动列表，这意味着当您到达末尾时，它将获取更多要显示的项目，然后将它们转储到列表中。

每当我们更改 DataSource 的内容时，似乎列表中的所有条目都会更新。我们确实为所有行设置了shouldComponentUpdate ，但根据我的理解rowHasChanged ，这些行不需要再次呈现。

我创建了一个简单的示例，展示了我们如何将项目附加到列表中： https ://gist.github.com/janmonschke/c9c84b6050683da0c64f

我们基本上做的是：

constructor() {
  // (...)
  this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {
    console.log('rowHasChanged');
    return r1 !== r2;
  }});
  // (...)
}

onEndReached = () => {
  // append data to the end
  setData = [...setData, ...genRandomSet()];
  this.setState({
    dataSource: this.ds.cloneWithRows(setData)
  });
  console.log('onEndReached');
};

render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderRow}
      onEndReached={this.onEndReached}
    />
  );
}

但是rowHasChanged永远不会被记录。

我是否以错误的方式使用它？有没有更好的方法附加到 ListView？

0.18.0和0.19.0的行为相同

Locked

资料来源

janmonschke

👍3 😕1

最有用的评论

好的，在： http://stackoverflow.com/a/33871118 中找到了解决方案。

显然，从正确的 DataSource 实例克隆很重要；）

因此，要点中的代码应该是：

  setData = [...setData, ...genRandomSet()];
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(setData)
  });

这似乎是一个很容易潜入您的代码库的错误。我想知道是否应该在文档中更加强调DataSource的正确用法。

janmonschke 于 2016-02-04

👍8

所有3条评论

嘿 janmonschke，感谢您报告此问题！

React Native，你可能听说过，正变得非常流行，事实上我们对它周围的活动有点不知所措。有太多问题需要我们妥善处理。

如果您不知道如何做某事或某事未按预期工作，但不确定这是一个错误，请在StackOverflow上使用标签react-native询问，或者更多实时交互，请在Discord上询问#react-native 频道。
如果这是您想要修复的功能请求或错误，请在Product Pains上报告。它有一个排名功能，可以让我们专注于社区正在经历的最重要的问题。
我们欢迎准备好进行深入讨论的明确问题和 PR。请在适当的地方提供屏幕截图，并始终提及您正在使用的 React Native版本。感谢你的贡献！

facebook-github-bot 于 2016-02-04

好的，在： http://stackoverflow.com/a/33871118 中找到了解决方案。

显然，从正确的 DataSource 实例克隆很重要；）

因此，要点中的代码应该是：

  setData = [...setData, ...genRandomSet()];
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(setData)
  });

这似乎是一个很容易潜入您的代码库的错误。我想知道是否应该在文档中更加强调DataSource的正确用法。

janmonschke 于 2016-02-04

👍8

谢谢@janmonschke！我同意，我有一堆视图不断地重新渲染，我无法弄清楚为什么会发生这种情况以及为什么rowHasChanged函数从未被调用过。 👊

ekryski 于 2016-06-24

此页面是否有帮助？

0 / 5 - 0 等级

React-native: 关于“rowHasChanged”和 ListView 渲染的困惑

最有用的评论

所有3条评论

相关问题