React-native: Confusión sobre `rowHasChanged` y la representación de ListView

Creado en 4 feb. 2016 · 3Comentarios · Fuente: facebook/react-native

Oigan todos,

Mientras trabajaba en algunas mejoras de rendimiento, descubrí que rowHasChanged no figuraba en ninguna de nuestras listas. Estas listas son listas de desplazamiento infinito, lo que significa que cuando llegue al final, buscará más elementos para mostrar y luego los volcará en la lista.

Parece que todas las entradas de la lista se actualizan cada vez que cambiamos el contenido de la fuente de datos. Tenemos un shouldComponentUpdate en su lugar para todas las filas, pero por lo que entendí rowHasChanged , no sería necesario volver a representar estas filas.

Creé un ejemplo simple que muestra cómo agregamos elementos a la lista: https://gist.github.com/janmonschke/c9c84b6050683da0c64f

Lo que hacemos básicamente es:

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}
    />
  );
}

Pero rowHasChanged nunca se registra.

¿Lo estoy usando de alguna manera de manera incorrecta? ¿Hay mejores formas de agregar a un ListView?

Mismo comportamiento en 0.18.0 y 0.19.0

Locked

Fuente

janmonschke

👍3 😕1

Comentario más útil

Bien, encontré la solución en: http://stackoverflow.com/a/33871118.

Aparentemente, es importante clonar desde la instancia correcta de DataSource;)

Así que el código de la esencia debería haber sido:

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

Esto parece un error que se cuela fácilmente en su base de código. Me pregunto si el uso correcto de DataSource debería enfatizarse más en la documentación.

janmonschke en 4 feb. 2016

👍8

Todos 3 comentarios

Hola, janmonschke, ¡gracias por informar este problema!

React Native, como probablemente haya escuchado, se está volviendo muy popular y la verdad es que estamos un poco abrumados por la actividad que lo rodea. Hay demasiados problemas para que los gestionemos adecuadamente.

Si no sabe cómo hacer algo o algo no funciona como espera, pero no está seguro de que sea un error , pregunte en StackOverflow con la etiqueta react-native o para más interacciones en tiempo real, pregunte en Discord en el #react-canal nativo.
Si se trata de una solicitud de función o un error que le gustaría corregir, infórmelo en Problemas del producto . Tiene una función de clasificación que nos permite centrarnos en los problemas más importantes que experimenta la comunidad.
Damos la bienvenida a temas claros y RP que estén listos para una discusión en profundidad. Proporcione capturas de pantalla cuando corresponda y siempre mencione la versión de React Native que está utilizando. ¡Gracias por sus aportaciones!

facebook-github-bot en 4 feb. 2016

Bien, encontré la solución en: http://stackoverflow.com/a/33871118.

Aparentemente, es importante clonar desde la instancia correcta de DataSource;)

Así que el código de la esencia debería haber sido:

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

Esto parece un error que se cuela fácilmente en su base de código. Me pregunto si el uso correcto de DataSource debería enfatizarse más en la documentación.

janmonschke en 4 feb. 2016

👍8

Gracias @janmonschke! Estoy de acuerdo, tenía un montón de vistas constantemente volviendo a renderizar y no podía entender por qué sucedía eso y por qué nunca se llamaba a la función rowHasChanged . 👊