React-native: Confusão sobre a renderização de `rowHasChanged` e ListView

Criado em 4 fev. 2016 · 3Comentários · Fonte: facebook/react-native

Olá a todos,

Enquanto trabalhava em algumas melhorias de desempenho, descobri que rowHasChanged não foi chamado em nenhuma de nossas listas. Essas listas são listas de rolagem infinita, o que significa que, quando você chegar ao final, ele buscará mais itens para exibir e depois os despejará na lista.

Parece que todas as entradas da lista são atualizadas sempre que alteramos o conteúdo do DataSource. Temos um shouldComponentUpdate em vigor para todas as linhas, mas pelo que entendi rowHasChanged , essas linhas não precisariam ser renderizadas novamente.

Criei um exemplo simples que mostra como estamos anexando itens à lista: https://gist.github.com/janmonschke/c9c84b6050683da0c64f

O que basicamente fazemos é:

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

Mas rowHasChanged nunca é registrado.

Será que estou usando de alguma forma errada? Existem maneiras melhores de anexar a um ListView?

Mesmo comportamento em 0.18.0 e 0.19.0

Locked

Fonte

janmonschke

👍3 😕1

Comentários muito úteis

Ok, encontrei a solução em: http://stackoverflow.com/a/33871118.

Aparentemente, é importante clonar da instância correta do DataSource;)

Portanto, o código da essência deveria ter sido:

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

Isso parece um erro que está se infiltrando facilmente em sua base de código. Gostaria de saber se o uso correto de DataSource deveria ser mais enfatizado na documentação.

janmonschke em 4 fev. 2016

👍8

Todos 3 comentários

Ei janmonschke, obrigado por relatar este problema!

React Native, como você provavelmente já ouviu falar, está se tornando muito popular e a verdade é que estamos ficando um pouco sobrecarregados com a atividade em torno dele. Há apenas muitos problemas para nós gerenciarmos adequadamente.

Se você não sabe como fazer algo ou algo não está funcionando como esperado, mas não tem certeza de que é um bug , pergunte no StackOverflow com a tag react-native ou para mais interações em tempo real, pergunte no Discord no #react-native canal.
Se esta for uma solicitação de recurso ou um bug que você gostaria de corrigir, por favor, reporte-o em Product Pains . Ele tem um recurso de classificação que nos permite focar nos problemas mais importantes que a comunidade está enfrentando.
Congratulamo-nos com questões claras e PRs que estão prontos para uma discussão aprofundada. Forneça capturas de tela quando apropriado e sempre mencione a versão do React Native que você está usando. Obrigado por suas contribuições!

facebook-github-bot em 4 fev. 2016

Ok, encontrei a solução em: http://stackoverflow.com/a/33871118.

Aparentemente, é importante clonar da instância correta do DataSource;)

Portanto, o código da essência deveria ter sido:

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

Isso parece um erro que está se infiltrando facilmente em sua base de código. Gostaria de saber se o uso correto de DataSource deveria ser mais enfatizado na documentação.

janmonschke em 4 fev. 2016

👍8

Obrigado @janmonschke! Eu concordo, eu tinha um monte de visualizações constantemente re-renderizando e eu não conseguia descobrir por que isso estava acontecendo e por que a função rowHasChanged nunca estava sendo chamada. 👊