React-native: Kebingungan tentang `rowHasChanged` dan rendering ListView

Dibuat pada 4 Feb 2016 · 3Komentar · Sumber: facebook/react-native

Hai semua,

Saat mengerjakan beberapa peningkatan kinerja, saya menemukan bahwa rowHasChanged tidak dipanggil dalam daftar kami. Daftar ini adalah daftar gulir tak terbatas, artinya ketika Anda mencapai akhir, itu akan mengambil lebih banyak item untuk ditampilkan dan kemudian membuangnya ke dalam daftar.

Sepertinya semua entri dalam daftar diperbarui setiap kali kami mengubah konten DataSource. Kami memiliki shouldComponentUpdate di tempat untuk semua baris, tetapi dari cara saya memahami rowHasChanged , baris ini tidak perlu dirender lagi.

Saya membuat contoh sederhana yang menunjukkan bagaimana kami menambahkan item ke daftar: https://Gist.github.com/janmonschke/c9c84b6050683da0c64f

Yang pada dasarnya kami lakukan adalah:

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

Tapi rowHasChanged tidak pernah dicatat.

Apakah saya menggunakannya dengan cara yang salah? Apakah ada cara yang lebih baik untuk menambahkan ke ListView?

Perilaku yang sama di 0.18.0 dan 0.19.0

Locked

Sumber

janmonschke

👍3 😕1

Komentar yang paling membantu

Oke, temukan solusinya di: http://stackoverflow.com/a/33871118.

Rupanya penting untuk mengkloning dari contoh DataSource yang benar ;)

Jadi kode dari intinya seharusnya:

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

Ini sepertinya kesalahan yang dengan mudah menyelinap ke basis kode Anda. Saya ingin tahu apakah penggunaan DataSource yang benar harus lebih ditekankan dalam dokumentasi.

janmonschke pada 4 Feb 2016

👍8

Semua 3 komentar

Hai janmonschke, terima kasih telah melaporkan masalah ini!

React Native, seperti yang mungkin pernah Anda dengar, menjadi sangat populer dan sebenarnya kami sedikit kewalahan dengan aktivitas di sekitarnya. Ada terlalu banyak masalah untuk kita kelola dengan baik.

Jika Anda tidak tahu bagaimana melakukan sesuatu atau sesuatu tidak berfungsi seperti yang Anda harapkan tetapi tidak yakin itu bug , silakan tanyakan di StackOverflow dengan tag react-native atau untuk interaksi waktu nyata lainnya, tanyakan di Discord di # saluran asli-reaksi.
Jika ini adalah permintaan fitur atau bug yang ingin Anda perbaiki, harap laporkan di Product Pains . Ini memiliki fitur peringkat yang memungkinkan kami fokus pada masalah terpenting yang dialami komunitas.
Kami menyambut isu-isu yang jelas dan PR yang siap untuk diskusi mendalam. Harap berikan tangkapan layar jika perlu dan selalu sebutkan versi React Native yang Anda gunakan. Terima kasih atas kontribusi Anda!

facebook-github-bot pada 4 Feb 2016

Oke, temukan solusinya di: http://stackoverflow.com/a/33871118.

Rupanya penting untuk mengkloning dari contoh DataSource yang benar ;)

Jadi kode dari intinya seharusnya:

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

Ini sepertinya kesalahan yang dengan mudah menyelinap ke basis kode Anda. Saya ingin tahu apakah penggunaan DataSource yang benar harus lebih ditekankan dalam dokumentasi.

janmonschke pada 4 Feb 2016

👍8

Terima kasih @janmonschke! Saya setuju, saya memiliki banyak tampilan yang terus-menerus dirender ulang dan saya tidak tahu mengapa itu terjadi dan mengapa fungsi rowHasChanged tidak pernah dipanggil. 👊.