ListView.DataSource 中 rowHasChanged 的​​确切输入是什么 [英] What are the exact inputs to rowHasChanged in ListView.DataSource

问题描述

在 react native 示例中，他们给了我们这段代码:

getInitialState: function() {返回 {数据源:新的 ListView.DataSource({rowHasChanged: (row1, row2) =>第 1 行 !== 第 2 行，}),加载:假，};},

但是，我似乎找不到任何描述 rowHasChanged 功能的简明文档.我们从哪里得到两个输入，row1 和 row2?在我们的 ListView 中定义了 row1 和 row2 的是什么?

我在这里查看了 Listview 的文档:http://facebook.github.io/react-native/docs/listview.html但我仍然不确定是什么定义了 rowHasChanged 的​​输入.

解决方案

TL,DR;您必须定义与您提供给数据源的数据相关的 rowHasChanged.

 var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});返回 {数据源:ds.cloneWithRows(['row 1', 'row 2']),};

在这个特定的例子中，r1 和 r2 将是一个字符串，因为 ds 有 2 个字符串行作为数据.

<小时>

这取决于您定义自己的数据格式并根据此实现 rowHasChanged.rowHasChanged 基本上每次更改数据源行时都会为每个数据源行条目调用，然后仅重新渲染更改的行(当 rowHasChanged 返回 true).

更高级的例子

假设我的数据源中有这种数据:

<预><代码>[{ 类型:DOG，年龄:12，姓名:史努比"}，{ 类型:CAT，年龄:13，姓名:奥利弗"}，{ 类型:人类，年龄:30，名字:杰罗姆"，姓氏:加西亚"}]

在我这里的示例格式中，type"是用于切换数据类型的必填字段，age"是适用于所有类型的字段，然后是特定字段.

然后我可以实现rowHasChanged:

const rowHasChanged = (r1, r2) =>{if (r1.type !== r2.type) 返回真；if (r1.age !== r2.age) 返回真；开关(r1.type){案例狗:案例猫:返回 r1.name !== r2.name;案例人类:返回 r1.firstName !== r2.firstName ||r1.lastName !== r2.lastName;默认:throw new Error("不支持的类型"+r1.type);}}

^ 这样，只有当一行确实根据我的格式发生变化时才会呈现.

(你可以想象我的 renderRow 函数也是一个类型开关)

In the react native example, they give us this piece of code:

getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  },

However, I can't seem to find any concise documentation describing rowHasChanged's functionality. Where do we get our two inputs, row1 and row2? What defines row1 and row2 in our ListView?

I've looked at the documentation for Listview here: http://facebook.github.io/react-native/docs/listview.html but I'm still not sure what defines rowHasChanged's inputs.

解决方案

TL,DR; you have to define rowHasChanged related to the data you give to the data source.

  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };

In this specific example, r1 and r2 will be a string because ds have 2 string rows as data.

---

It's up to you do define your own data format and to implement rowHasChanged according to this. rowHasChanged is basically called for each data source rows entry each time you change that data source rows, then only the rows that get changed are re-render (when rowHasChanged returned true).

More advanced example

Let's say I have this kind of data in my DataSource:

[
  { type: DOG, age: 12, name: "Snoopy" },
  { type: CAT, age: 13, name: "Oliver" },
  { type: HUMAN, age: 30, firstName: "Jerome", lastName: "Garcia" }
]

in my example format here, "type" is a mandatory field to switch the kind of data, "age" is a field available across all types, and then there is specific fields.

then I can implement rowHasChanged:

const rowHasChanged = (r1, r2) => {
  if (r1.type !== r2.type) return true;
  if (r1.age !== r2.age) return true;
  switch (r1.type) {
    case DOG:
    case CAT:
      return r1.name !== r2.name;
    case HUMAN:
      return r1.firstName !== r2.firstName || r1.lastName !== r2.lastName;
    default:
      throw new Error("Unsupported type "+r1.type);
  }
}

^ that way, a row only renders if it really changes according to my format.

(and you can imagine my renderRow function is something with a switch on type too)

这篇关于ListView.DataSource 中 rowHasChanged 的​​确切输入是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！