React-window: Mendukung konten terukur tepat waktu

Pekerjaan yang sedang dalam proses untuk MVP tersedia di https://github.com/bvaughn/react-window/compare/master...issues/6

Saya menggunakan ini dalam mui-downshift dan saat ini masih menggunakan UNSAFE_componentWillReceiveProps , meskipun saya berencana untuk mencoba melakukan port ke react-window dalam waktu dekat (setelah ketinggian konten dinamis tersedia).

apakah ini mekanisme yang dapat digunakan kembali di UITableView di IOS？

@luoboding Saya tidak mengerti pertanyaan Anda. Bisakah Anda menjelaskannya?

@bvaughn maaf teman saya bahasa inggris saya kurang bagus.

saya punya masalah dalam proyek saya, saya punya ribuan opsi dalam elemen pilih, itu menjadi sangat lambat dan macet ketika halaman dimuat ulang, saya mencoba menulis komponen untuk membuatnya lebih baik, saya adalah pengembang IOS, saya tahu mekanisme yang dapat digunakan kembali di UITableView di IOS, jika saya memerlukan elemen pilih tinggi 500px, saya mengonfigurasi ketinggian elemen opsi ke 100px, jadi saya hanya perlu membuat (Math.floor (500/100)) jumlah elemen opsi dan kapasitas antrian (antrian sumber data yang ditampilkan saat ini ), ketika saya menggulir elemen pilih ke atas atau ke bawah, cukup tekan atau pop ke antrian untuk merender ulang.

saya ingin mengimpor react-window dalam proyek saya, apakah berfungsi seperti yang saya sebutkan?

Apa yang Anda gambarkan adalah bagaimana react-window (dan windowing, atau oklusi pemusnahan, secara umum) bekerja. Ini tidak benar-benar terkait dengan masalah ini. Ini tentang mengukur tepat waktu konten berjendela. Dalam kasus Anda, objek memiliki tinggi tetap– sehingga Anda dapat menggunakan komponen FixedSizeList : https://react-window.now.sh/#/examples/list/fixed -size

Senang melihat penahan asli ditujukan di jendela reaksi.

Ngomong-ngomong, maaf jika saya menaikkan standar sedikit terlalu banyak pada diagram… 😅

@bvaughn kapan Anda akan merilis fitur ini, saya sedang mencari itu

Saya menerbitkan 1.0.0 tanpa fungsi ini karena saya kesulitan menemukan waktu (dan energi) untuk menyelesaikannya sekarang. Masih berencana untuk menambahkannya di masa mendatang. Tidak ada perkiraan kapan.

Sepertinya "daftar besi" Polymer menggunakan teknik yang sama seperti yang saya usulkan di sini: https://github.com/domenic/infinite-list-study-group/blob/master/studies/Polymer-iron-list.md #virtual -list -sizing

ini akan sangat berguna bagi kami, saat ini sepertinya kami harus menjaga agar CSS tetap sinkron dengan logika komponen yang menduplikasi penghitungan ketinggian hanya untuk meneruskannya ke daftar virtual.

@kevinder dapatkah Anda berbagi bagaimana Anda menangani konten yang diukur tepat waktu? Terima kasih sebelumnya

@carlosagsmendes tidak yakin apakah ini akan membantu tetapi inilah yang saya lakukan saat menggunakan ini untuk menampilkan riwayat obrolan:

1.) Dalam konstruktor buat referensi untuk daftar dan untuk komponen ChatHistory :

  constructor(props) {
    super(props);
    this.listRef = createRef();
    this.chatHistoryRef = createRef();
    this.listHeight = 0;
  }

Saya kemudian meneruskan referensi ke ChatHistory yang bertanggung jawab untuk membuat daftar

2.) Dalam componentDidMount komponen induk saya menggunakan ChatHistory ref untuk mendapatkan tinggi elemen:

componentDidMount() {
    this.listHeight = this.chatHistoryRef.current.offsetHeight;
}

3.) Dalam komponen induk saya memelihara sebuah array dalam keadaannya dengan detail chathistory. Saat menambahkan item baru ke array itu saya melakukannya seperti ini:

  // find out how many pixels in height the text is going to use
  const size = getSize({
    text: displayText,
    className: styles.message,
  });

  let { height } = size;
  height += 20; // adds some spacing in pixels between messages
...rest of items needed for the chat history item..add them all to an array and update state

getSize didasarkan pada https://github.com/schickling/calculate-size tetapi saya memodifikasinya untuk mendukung penerimaan nama kelas. Kelas itu sama dengan yang digunakan sebagai wadah untuk menampilkan pesan individu

Saya yakin ada cara yang lebih baik untuk mencapai ini tetapi tampaknya cukup cepat dan saya belum menemukan masalah apa pun

@osdlge :

@bvaughn yakin, saya mengekstrak bagian yang relevan dari kode saya ke https://codesandbox.io/s/5z282z7q1l

Terima kasih sudah berbagi! 😄

Saya telah mendorong beberapa pekerjaan yang sedang berlangsung ke pendekatan awal pada konten yang diukur secara malas ke cabang bernama issue / 6

Saya juga telah menerapkan demo:
https://react-window-next.now.sh/#/examples/list/dynamic -size

Sangat keren.

Saya masih mencoba memahami masalah umum dengan pengguliran tak terbatas saat menelusuri sumber masalah / 6 cabang dan diskusi ini. Jadi pertanyaan pertanyaan berikut mungkin tidak masuk akal, tetapi ini dia karena saya sangat ingin memahami ini lebih lanjut:

Apakah penyebutan 'Scroll Anchor' di atas terkait dengan scroll Anchoring sebagai teknik seperti dalam artikel terkait atau spesifikasi CSS Scroll Anchoring ?

Terima kasih sebelumnya

Ini semacam terkait secara tangensial dengan tautan pertama Anda, tetapi tidak dengan yang kedua. Itu hanya istilah yang saya pilih untuk digunakan untuk masalah ini karena masuk akal bagi saya, bukan karena terkait dengan spesifikasi atau proposal lain.

Saya juga menerbitkan versi pra-rilis dari react-window ke NPM sebagai "berikutnya" (mis. yarn add react-window@next ).

Anda dapat bermain-main dengannya dengan membagi Code Sandbox ini:
https://codesandbox.io/s/5x8vlm0o7n

Saya baru saja mengujinya. Saya mencoba 10.000 paragraf dan mencoba melompat ke akhir. Itu dendeng.
Jika saya mengerti dengan benar, itu seharusnya hanya mengukur baris yang diperkirakan berada di akhir dan oleh karena itu seharusnya melompat secara instan ke akhir. Apakah ini benar?

Pada 12 Okt 2018, pada 12:53, Brian Vaughn [email protected] menulis:

Saya juga telah menerbitkan versi pra-rilis dari react-window ke NPM sebagai "berikutnya" (misalnya, benang menambahkan react-window @ next).

Anda dapat bermain-main dengannya dengan membagi Code Sandbox ini:
https://codesandbox.io/s/5x8vlm0o7n https://codesandbox.io/s/5x8vlm0o7n
-
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub https://github.com/bvaughn/react-window/issues/6#issuecomment-429271555 , atau nonaktifkan utas https://github.com/notifications/unsubscribe-auth/ AOf2h7RmSEyGmyrEdMY6GgyZFjCKlDDFks5ukGafgaJpZM4UTb3P .

Tidak, cabang awal yang saya dorong tidak menerapkan algoritme
dijelaskan dalam masalah ini. Dibutuhkan pendekatan yang lebih naif sesuai kebutuhan
mengukur konten sebelumnya sebelum merender konten nanti.

Maaf bila membingungkan!

Pada Jum, 12 Okt 2018, 18:34 akraines [email protected] menulis:

Saya baru saja mengujinya. Saya mencoba 10.000 paragraf dan mencoba melompat ke
akhir. Itu dendeng.
Jika saya mengerti dengan benar, itu seharusnya hanya mengukur perkiraan baris
untuk berada di ujung dan oleh karena itu seharusnya melompat secara instan ke
akhir. Apakah ini benar?

Pada 12 Okt 2018, pada 12:53, Brian Vaughn [email protected] menulis:

Saya juga menerbitkan versi pra-rilis react-window ke NPM sebagai
"berikutnya" (misalnya benang menambahkan react-window @ next).

Anda dapat bermain-main dengannya dengan membagi Code Sandbox ini:
https://codesandbox.io/s/5x8vlm0o7n < https://codesandbox.io/s/5x8vlm0o7n

-
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub <
https://github.com/bvaughn/react-window/issues/6#issuecomment-429271555>,
atau nonaktifkan utas <
https://github.com/notifications/unsubscribe-auth/AOf2h7RmSEyGmyrEdMY6GgyZFjCKlDDFks5ukGafgaJpZM4UTb3P
.

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/bvaughn/react-window/issues/6#issuecomment-429282228 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AABznR5R1N0ErukleIfvaLQORF_NECgRks5ukHBHgaJpZM4UTb3P
.

Hei,
Saya ingin bertanya apakah ada perkiraan untuk rilis resmi?

Tim saya menggunakan react-virtualized untuk proyek baru yang kami mulai, namun kami memerlukan fungsionalitas untuk menggulir ke atas dan melompat ke indeks baris tertentu (karena Anda dapat mengasumsikan baris kami memiliki konten dinamis, berisi gambar dan konten lain yang berubah).

Apakah Anda merekomendasikan bermigrasi ke react-window dalam rilis alfa? Atau haruskah kita menunggu rilis resmi?

Juga jika ada cara saya dapat berkontribusi untuk menyelesaikan fitur ini, saya akan dengan senang hati membantu 😄

Sayangnya saya tidak dapat berkomitmen untuk jadwal rilis saat ini karena saya belum melakukan banyak pengujian dan saya tidak tahu jenis masalah apa yang akan saya hadapi saat melakukannya (atau berapa lama waktu yang dibutuhkan untuk memperbaikinya. mereka).

Jika Anda ingin berkontribusi, salah satu caranya adalah dengan menguji rilis alfa dan beri tahu saya seberapa baik kerjanya, dan jika Anda menemukan bug.

Saya mungkin akan lebih fokus pada ini segera, tetapi saya tidak bisa mengatakan seberapa cepat. Khususnya untuk satu atau dua minggu ke depan, saya terganggu oleh konfigurasi React dan menyiapkan rilis 16.6.

@bvaughn kerja bagus 👏 Akhirnya punya waktu untuk bermain-main. 🕹

Sepertinya kami memerlukan beberapa penyesuaian saat menyembunyikan daftar dengan display: none Misalnya Anda memiliki halaman dengan dua tab dan ingin beralih di antara mereka tanpa kehilangan status Anda saat ini (posisi gulir dll.), Imho itu bukan kasus penggunaan yang jarang .

Simple Code Sandbox menyajikan masalah ini:
https://codesandbox.io/s/p7vq18wmjq

Ini terjadi karena ketika kita memicu tampilan tidak ada, semua anak akan memiliki offsetHeight === 0
resize mengamati kiks dan memperbarui nilai-nilai baru. react-window seharusnya tidak peduli untuk situasi ini jika pemanggil memutuskan untuk menyembunyikannya, dasar harus menanganinya dengan memblokir handleNewMeasurements

jika baris ini
https://github.com/bvaughn/react-window/blob/issues/6/src/DynamicSizeList.js#L443
akan berubah menjadi

handleNewMeasurements: instance._handleNewMeasurements

lalu kita bisa mengganti logika default

let _handleNewMeasurements

<DynamicSizeList  
  ref={current => {
    if (current) {
      _handleNewMeasurements = current._handleNewMeasurements
      current._handleNewMeasurements = (...args) => {
        if (!isHidden) {
          return _handleNewMeasurements(...args)
        }
      }
    }
  }}
  {...otherProps}

Saya mendorong pembaruan ke cabang ini (dan menerbitkan tag @next ke NPM) yang memperbaiki bug pengguliran lancar Firefox dengan menggunakan margin-top untuk memperhitungkan item yang diubah ukurannya saat pengguliran sedang berlangsung. Ini lebih rumit daripada yang saya inginkan, tetapi saya tidak tahu cara yang lebih baik untuk menangani ini saat ini. (Saya juga perlu melakukan beberapa pengujian lagi terhadap pendekatan ini, karena menurut saya pendekatan ini mungkin masih kasar dalam kasus yang ekstrem.)

Saya menghargai masukan di atas, @piecyk. Saya belum punya waktu untuk menggalinya. (Ini masih semacam proyek sampingan bagi saya saat ini.)

Sepertinya saya dapat menghapus retasan margin demi setidaknya scrollBy untuk Firefox . Perlu menguji IE dan Edge terlebih dahulu. Mereka mungkin memiliki tantangannya sendiri.

Ya @bvaughn saya tahu, pekerjaan luar biasa 👏 Tidak tahu bagaimana Anda menemukan waktu! 🥇Kudos untukmu!

Tapi mari kita kembali ke masalah ketika daftar ada di beberapa elemen DOM yang disembunyikan dengan tidak ada tampilan, dasar kita perlu memeriksa apakah pembungkus memiliki tinggi, lebar jika tidak kita tidak ingin mulai merender (saat ini akan mencoba merender seluruh daftar) Akan mencoba besok untuk memperbaikinya (memiliki sesuatu yang disimpan)

Ya. Saya memahami inti dari masalah yang Anda gambarkan. Saya tidak suka gagasan meretasnya dengan menimpa / monkey-patching lebih banyak metode instance, jadi saya ingin memikirkannya terlebih dahulu.

Sepertinya paket @next rusak?

https://codesandbox.io/s/5x8vlm0o7n

Tidak tahu apakah itu tempat yang tepat untuk meninggalkan pertanyaan, jadi permisi jika saya salah. Singkatnya:

• Saya telah menggunakan DynamicSizeList bersama dengan AutoResizer dan secara umum berfungsi dengan baik. Pujian!
• Saya telah diminta untuk memperkenalkan Baris yang isinya dapat diperluas (menambahkan div tambahan dengan informasi tambahan) dan ditarik kembali.
• Saya juga telah menambahkan (melalui redux) sebuah prop pada Baris ini yang mendengarkan tindakan perluasan / penarikan global.
• Hal-hal menyenangkan dimulai. Saya klik perluas / tarik kembali dan semuanya tampak hebat!
• Jika saya menggulir sedikit dan kemudian memperluas / menarik semua baris, jumlah baris yang ditarik sama dengan baris yang diperluas. Jika saya memperluas retraksi lagi, angka menjadi setengah dan seterusnya.
  (yaitu 30 baris ditarik -> 10 diperluas -> klik tarik -> 10 baris ditarik -> klik luaskan -> 3 baris diperluas -> klik tarik -> 3 baris ditarik).

Saya mencoba memuat ulang itemData dengan menyediakan objek yang berbeda namun sama dengan peretasan JSON.parse (JSON.stringify (data)). Tidak beruntung :-(

Saya menduga ada kesalahan perhitungan ketinggian. Ada ide untuk mengatasi masalah ini?

Bisakah Anda membagikan contoh kode dan kotak? Saya perlu melakukan hal serupa jadi mungkin kita bisa saling membantu

@vtripolitakis Saya baru saja menemukan contoh dengan baris yang dapat diperluas . Berikut tautan ke diskusi

@carlosagsmendes terima kasih untuk ini, tetapi studi kasus saya sedikit berbeda karena saya menggunakan DynamicSizeList :-(

Jadi saya menemukan alasan masalahnya:
state.scrollOffset mengambil nilai negatif.

pada src/DynamicSizeList.js kita perlu menambahkan kode berikut pada baris 299

if (sizeDeltaForStateUpdate < 0) {
          sizeDeltaForStateUpdate = 0;
        }

Hm ... Sekilas saya tidak berharap perbaikan itu benar. Delta ukuran mungkin benar-benar negatif, bukan?

Mungkin kita harus memiliki penjaga ( Math.max(0, prevState.scrollOffset + sizeDeltaForStateUpdate) ) di mana nilai state.scrollOffset diperbarui?

Halo, saat saya men-debug kasus saya sizeDeltaTotal mengambil nilai negatif dan karenanya menghasilkan sizeDeltaForStateUpdate negatif, menghasilkan state.scrollOffset negatif setelah pembaruan status.

Ini terjadi ketika saya memperluas dan menarik item dan kemudian menggulir ke atas memiliki scrollOffset 0 dan arah backwards . Kemudian Jika saya memperluas dan menarik beberapa kali, saya mendapatkan yang negatif.
Ya, saran Anda harus sama baiknya. ~ Mengujinya sekarang. ~ Bekerja dengan baik.

@marcneander coba versi 1.4.0-alpha.1

Mengenai mengabaikan peristiwa pengubahan ukuran saat daftar disembunyikan, mungkin seperti ini https://github.com/piecyk/react-window/commit/acfd88822156611cfd38872acdafbbefd2d0f78f
@bvaughn apa yang kamu pikirkan?

Saya mencoba menambahkan gulir otomatis di aplikasi bergaya kotak obrolan dan saya mengalami masalah ini: DynamicSizeList does not support scrolling to items that have not yet measured. scrollToItem() was called with index 111 but the last measured item was 110.

Saya mencoba menelepon scrollToItem(items.length-1) di componentDidUpdate

Apakah ini perilaku yang disengaja?

Ya, mungkin hal seperti itu bisa berhasil @piecyk 👍

Apakah ini perilaku yang disengaja?

Kedengarannya tidak seperti @xaviergmail , tidak. Mungkin serangga.

hai @bvaughn Saya tidak bermaksud untuk menggagalkan masalah ini, tetapi saya ingin berpadu dengan mengatakan bahwa ada implementasi array jarang rapi dari internal DataGrid Flex 4 yang mungkin dapat membantu di sini. Saya tahu Flash adalah: -1 :, tetapi versi terakhir Flex sebenarnya memiliki mesin tata letak virtual yang cukup hebat ... karena Flash :-)

LinearLayoutVector adalah larik renggang untuk pemetaan antara indeks item dan posisi piksel dalam satu dimensi. Tiga operasi dasar tersebut adalah:

interface LinearLayoutVector {
   start: (index) => position;
     end: (index) => position;
  indexOf: (position) => index;
}

Secara internal ia mengalokasikan ember dalam pangkat 2 untuk menyimpan posisi item (daya spesifik dapat disetel untuk mengakomodasi ukuran item yang lebih besar atau lebih kecil dengan lebih baik). Hal ini memungkinkan pencarian O (1) index -> position waktu konstan, dan pemindaian blok linier yang efisien untuk pencarian position -> index . Ini mendukung padding, celah, ukuran default, dan penyisipan akses acak, penghapusan, dan pembaruan.

Saya mem-portingnya ke JS sekitar 6 tahun yang lalu ketika saya melakukan banyak UI virtual untuk seluler. Itu bisa menggunakan pembaruan ke ES6 untuk keterbacaan, dan mungkin bisa memeras lebih cepat dengan beralih ke array yang diketik, tetapi logika dasarnya adalah suara.

Saya mengirimkan draf PR untuk bereaksi-virtual beberapa minggu lalu yang mengganti internal CellSizeAndPositionManager dengan LLV dan itu menyelesaikan beberapa hal pembatalan kinerja / cache. Jika Anda sedang down, saya akan dengan senang hati mengirimkan PR serupa dengan react-window dalam beberapa minggu ke depan.

Hai @trxllnt 👋

Jika Anda tertarik untuk berbagi PR, saya akan dengan senang hati melihatnya. Anda ingin membuatnya melawan cabang issues/6 (WIP PR # 102).

Sekilas, linear-layout-vector sepertinya tidak ada tes atau digunakan terlalu berat, jadi saya akan memiliki sedikit keengganan awal tetapi saya masih ingin melihatnya. Saya juga ingin melihat berapa banyak bobot yang ditambahkan ke bundel setelah di-uglified + diperkecil tetapi saya tidak berharap itu bertambah terlalu banyak. 😄

@bvaughn tidak berkeringat, saya sangat mengerti. Itu adalah hal yang saya lakukan bertahun-tahun yang lalu selama xmas IIRC. Saya akan membersihkannya dan memastikannya mendarat dengan rangkaian pengujian penuh. Jangan khawatir tentang menimbulkan ketergantungan ekstra. Ini kelas yang kecil, saya senang berkontribusi secara langsung.

Setelah saya berkomentar, saya ingat saya memiliki demo yang saya lakukan port untuk: https://github.com/trxcllnt/virt-list. Kunjungi situs halaman GH itu dan lempar daftar film ke kiri dan kanan (ini terkait dengan beberapa diskusi tentang kinerja render yang kami alami di tim iOS di Netflix).

@bvaughn Terima kasih atas semua pekerjaan yang telah dilakukan di cabang issue / 6 selama setahun terakhir!
Saat ini saya menguji ^1.6.0-alpha.1 dan berencana mengirim ke produksi dengan versi itu.

Pikir saya akan memposting apa yang perlu saya lakukan untuk bekerja dengan DynamicSizeList untuk orang lain yang melihat masalah ini dan menggunakan yang terbaru di cabang.

Mengikuti dokumen yang ditautkan di atas dan yang dihasilkan dari issues / 6 branch akan mengarah ke

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

jadi perbaikannya adalah meniru apa yang Anda lakukan dalam tes dan ...

import { DynamicSizeList as List } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';

// in constructor(props) for handling scrolling
this.listRef = React.createRef();

// in render()
const allItems = [...];
const Renderer = ({ forwardedRef, style, index, ...rest }) => (
  <div ref={forwardedRef} style={style}>
    <MyCoolComponent index={index} otherProps={otherPropsBasedOnAllItems} />
  </div>
);

const RefForwarder = React.forwardRef((props, ref) => (
  <Renderer forwardedRef={ref} {...props} />
));

return <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
  <div style={{ flexGrow: 0, flexShrink: 0, width: '100%', position: 'sticky', top: 0, zIndex: zIndexHideLayers }}>
    <MyCoolComponentThatControlsScrolling listRef={this.listRef} />
  </div>
  <div style={{ flex: 1, width: '100%' }}>
    <AutoSizer>
      {({ height, width }) => (
        <List ref={this.listRef} itemCount={allItems.length} width={width} height={height}>
          {RefForwarder}
        </List>
      )}
    </AutoSizer>
  </div>
</div>;

Contoh saya mungkin menyertakan lebih dari apa yang Anda inginkan pada halaman dokumen itu, tapi mudah-mudahan akan membuat pembaruan dokumen lebih mudah bagi Anda

Umpan balik tentang versi cabang saat ini?
💯 bekerja dengan baik
🎉 terima kasih lagi untuk semua pekerjaannya!

edit: DynamicSizeList benar-benar membuat perpustakaan ini begitu mudah digunakan sekarang.

Terima kasih telah membagikan detailnya! Ketika saya mendapatkan beberapa bandwidth untuk mengambil kembali masalah ini, saya akan menggali lebih dalam.

Saya pikir pendekatan ini dapat digunakan bersama dengan proposal asli dalam masalah ini.

Daripada menggunakan ukuran item sebelumnya, kita bisa menggunakan perkiraan ukuran– dan menyempurnakan dengan ukuran sebenarnya saat seseorang menggulir. (Menurut saya tidak ada perbedaan penting antara "ukuran yang diukur sebelumnya" dan "ukuran perkiraan" kecuali fakta bahwa ukuran yang diukur sebelumnya cenderung lebih akurat. Namun, ini mungkin trade off yang dapat diterima karena akan memungkinkan kita untuk melompat ke tempat sembarang dalam data tanpa merender hal-hal yang datang sebelumnya, _and_ itu akan membebaskan kita dari keharusan untuk mempertahankan cache ukuran item.)

Saya pikir ini bisa menyederhanakan masalah penahan gulir secara signifikan. Kami hanya dapat melakukan lompatan awal (seperti yang dijelaskan) dan kemudian menganggap semua "sebelum" (atas atau kiri) adalah ukuran yang diperkirakan. Kemudian saat kita menggulir, perbaiki.

Mungkinkah bisa bekerja?

@bvaughn Apakah ini akan memperbaiki masalah yang ditangani @xaviergmail , yang awalnya menggulir ke "bawah" seperti obrolan? Saya membuat kode dan kotak contoh tidak berfungsi. Jika tidak, apakah ada solusi lain?

https://codesandbox.io/s/vr648ywy3

Mari kita pertahankan komentar tentang masalah ini fokus pada diskusi API, bukan pemecahan masalah.

Saya menyarankan Stack Overflow untuk mengajukan pertanyaan.

Apakah mungkin untuk mengekspos resetAfterIndex di API ini? Saya menambahkan, mengedit, dan menghapus dari DynamicSizeList saya dan, setidaknya dari apa yang dapat saya kumpulkan, ini akan menjadi metode untuk memanggil untuk memperbaiki ketinggian, ya?

@bvaughn bermain-main selama akhir pekan dengan ide memposisikan item dengan indeks jangkar dan menggulir daftar untuk menyelaraskan apa yang dilihat pengguna ... Kesan pertama bahwa itu dapat berfungsi 😅 Untuk kesederhanaan daftar diberikan tanpa elemen pemindaian berlebih, juga kami perlu mengubah cara kerja cache (dalam penghapusan ini selalu dibersihkan) ... Bagaimana menurut Anda?

implementasi poc https://github.com/piecyk/react-window/pull/2/files
di sini adalah sandbox kode yang menjalankan pembangunan cabang
https://codesandbox.io/s/4x1q1n6nn9

uh-oh firefox tidak dapat mengikuti rendering saat pengguliran cepat seperti yang dilakukan Chrome menggunakan pendekatan ini 🤷‍♂️

Saya mencoba menambahkan gulir otomatis di aplikasi bergaya kotak obrolan dan saya mengalami masalah ini: DynamicSizeList does not support scrolling to items that have not yet measured. scrollToItem() was called with index 111 but the last measured item was 110.

Saya mencoba menelepon scrollToItem(items.length-1) di componentDidUpdate

Apakah ini perilaku yang disengaja?

Agak terlambat tapi saya mencoba untuk memecahkan masalah itu dengan hook reaksi ini .

Bukan solusi terbaik tapi saya masih mengerjakannya. Mungkin kita bisa bekerja untuk membuatnya lebih umum (dan sederhana) dan membuat sebuah paket?

Gif untuk menunjukkan bagaimana ini bekerja sekarang:
https://cl.ly/87ca5ac94deb

Mungkin kita bisa membuka masalah baru untuk membicarakan solusi untuk perilaku seperti obrolan ini?

uh-oh firefox tidak dapat mengikuti rendering saat scrolling cepat seperti yang dilakukan Chrome menggunakan pendekatan ini

Sepertinya ini berfungsi di Firefox Nightly versi 68.

@bvaughn Saya menggunakan DynamicSizeList dengan komponen InfiniteLoader dan Autosizer untuk mencoba membuat umpan. Saya suka apa yang saya seeng selama ini, pertahankan :)

Dalam hal API dan perilaku:

1. Bisakah kita mendapatkan objek data sebagai argumen kedua di callback itemKey, seperti di FixedSizeList?

2. Bisakah kita mengatur ulang ketinggian wadah bagian dalam ketika objek data disaring / dimodifikasi.

Saya telah menggunakan DynamicSizeList dari 1.6.0-alpha.1 dengan InfiniteLoader untuk sementara waktu sekarang dan itu telah bekerja dengan baik. Terima kasih untuk fitur yang luar biasa!

Namun, sekarang saya memiliki persyaratan untuk menggunakan scrollToItem() . Mirip dengan komentar di atas, tetapi berbeda karena sama sekali belum ada yang diukur, saya mendapatkan:

DynamicSizeList does not support scrolling to items that yave not yet measured. scrollToItem() was called with index 9 but the last measured item was -1.

Tampaknya tidak terkait waktu ketika saya mencoba memanggilnya setelah lama setTimeout . Jadi, bisakah saya memaksakan pengukuran? Atau apakah ada solusi lain?

EDIT : Tidak apa-apa, initialScrollOffset melakukan apa yang saya butuhkan.

mengapa menggunakan findDOMNode?

Apakah ada definisi tipe untuk cabang @next ?

@WillSquire no, mereka tidak. Saya juga tidak yakin apakah mungkin untuk merilisnya pada @next tag di DefinitelyTyped (saya mungkin salah). Juga, saya pikir akan lebih baik menunggu sampai cabang ini akhirnya digabungkan dan versi baru dirilis karena API masih bisa berubah.

@bvaughn Saya sudah bersedia menggunakan ini di devhub , tetapi sebelum saya berinvestasi untuk mengintegrasikannya, apakah menurut Anda ini sudah dalam kondisi baik atau masih memiliki beberapa masalah pemblokir?

@brunolemos Daftar

selalu kabari saya!

~ Mencoba menggunakannya tetapi sejauh ini belum berhasil. ~

Berhasil tetapi kinerjanya tidak bagus. Mungkin render item saya mahal atau hal lain.

https://github.com/devhubapp/devhub/pull/152

Sepertinya ada yang rusak pada versi terbaru saat menggunakan AutoSizer dengan tinggi penampung 100%

Sunting: Saya dapat menemukan solusi menggunakan 100vh dan calc ()

sesuatu mungkin telah rusak

Terlalu samar untuk bisa ditindaklanjuti. Bagikan teguran bersama dengan perilaku yang diharapkan?

Saya menggunakan DynamicSizeList dari 1.6.0-alpha.1 dengan filter berbeda dan beberapa tampilan kartu yang rumit. Tapi kita perlu membungkusnya dengan tinggi dan lebar. Ini bekerja dengan baik untuk saya.

Terima kasih kawan

Halo, Saya mencoba DynamicSizeList , tetapi semua item saya ditampilkan di atas satu sama lain. Saya meneruskan atribut gaya ke item yang dirender, tetapi jika saya mencatat style , saya melihat bahwa height tidak ditentukan untuk setiap item, top dan left selalu 0 .
Apa yang saya lewatkan di sini :-)?

@ graphee-gabriel Anda melewatkan contoh reproduksi.

Ketinggian sengaja tidak ditentukan pada awalnya, agar item dapat dirender dengan ukuran aslinya ...

Ok saya mengerti logikanya, maka ini bukan alasan item ditampilkan di atas satu sama lain.
Saya akan memberikan data sebanyak yang saya bisa, saya pikir mungkin saya melakukan kesalahan umum atau melewatkan langkah yang jelas yang mengarah ke masalah ini (seperti tidak meneruskan objek gaya).

import React from 'react'
import { DynamicSizeList as List } from 'react-window'

import Layout from '../Layout'
import Text from '../Text'
import withScreenDimensions from '../withScreenDimensions'

class ListView extends React.Component {
  state = {
    availableHeight: 0
  }

  componentDidMount() {
    const checkForHeightChange = () => {
      if (this.containerDiv) {
        const { offsetHeight } = this.containerDiv
        if (this.offsetHeight !== offsetHeight) {
          this.offsetHeight = offsetHeight
          this.setState({ availableHeight: offsetHeight })
        }
      }
    }
    checkForHeightChange()
    this.intervalId = setInterval(checkForHeightChange, 10)
  }

  componentWillUnmount() {
    clearInterval(this.intervalId)
  }

  render() {
    const {
      data,
      renderItem,
      emptyText,
      dimensions,
    } = this.props
    const { width } = dimensions
    const { availableHeight } = this.state
    return (
      <Layout
        centerVertical
        style={{
          height: '100%',
        }}>
        {data && data.length > 0 ? (
          <div
            style={{
              display: 'flex',
              flex: 1,
              height: '100%',
              backgroundColor: 'red',
              alignItems: 'stretch',
              justifyContent: 'stretch',
            }}
            ref={ref => this.containerDiv = ref}
          >
            <List
              height={availableHeight}
              itemCount={data.length}
              width={width > 800 ? 800 : width}
            >
              {({ index, style }) => {
                console.log('style', style)
                return (
                  <div style={style}>
                    {renderItem({
                      item: data[index], index
                    })}
                  </div>
                )
              }}
            </List>
          </div>
        ) : (
            <Text bold center padding accent>{emptyText}</Text>
          )}
      </Layout>
    )
  }
}


export default withScreenDimensions(ListView)

Bagikan Code Sandbox di mana saya dapat melihat ini?

Saya akan menyarankan _not_ menggunakan fungsi inline untuk penyaji item Anda karena itu menyebabkan remount yang tidak perlu karena fakta bahwa itu berubah setiap kali induknya diberikan. (Inilah mengapa semua contoh menghindari fungsi sebaris.)

@ graphee-gabriel Saya sudah punya ini juga, dokumen tidak menyebutkannya tetapi Anda perlu membuat komponen baris Anda mendukung menerima referensi:

Row = React.forwardRef(
      (row, ref) => (
        <div ref={ref} style={row.style}>
          {renderItem({
            item: data[row.index],
            index: row.index,
          })}
        </div>
      ),
    )

Halo, ini dia:

https://codesandbox.io/s/sweet-sea-irxl8?fontsize=14

Ya, memang untuk fungsi inline, ini adalah kode yang sangat lama yang saya coba migrasi ke react-window, dan tidak meluangkan waktu untuk memperbaikinya di sini juga.
Terima kasih atas tanggapan Anda. Beri tahu saya apa yang Anda temukan di kotak pasir ini.

Annnnnd Seharusnya aku sudah mengecek pesan @brunolemos sebelum melakukan sandbox itu hehe.
Ini adalah langkah yang hilang, dan memperbaiki masalah saya, terima kasih!

Ini mengangkat masalah lain, saya memperbarui kotak pasir sehingga Anda dapat mereproduksi @bvaughn
Temukan di sini: https://codesandbox.io/s/sweet-sea-irxl8

Sekarang daftar tersebut berfungsi dengan baik, tetapi anehnya tampaknya bertambah dengan konten, dan tidak pernah menyusut lagi.

Berarti:

1. Jika saya menunjukkan 6 item, gulir sampai akhir, semuanya baik-baik saja.
2. Ubah konten untuk menampilkan 20 item, gulir sampai akhir, semuanya bagus.
3. Ubah kembali konten menjadi 6 item, gulir hingga item terakhir, tetapi saya dapat melanjutkan menggulir di ruang putih yang tampaknya tersisa dari konten sebelumnya (kumpulan data 20 item).

Ini mengangkat masalah lain, saya memperbarui kotak pasir sehingga Anda dapat mereproduksi @bvaughn
Temukan di sini: https://codesandbox.io/s/sweet-sea-irxl8

Sekarang daftar tersebut berfungsi dengan baik, tetapi anehnya tampaknya bertambah dengan konten, dan tidak pernah menyusut lagi.

Berarti:

1. Jika saya menunjukkan 6 item, gulir sampai akhir, semuanya baik-baik saja.
2. Ubah konten untuk menampilkan 20 item, gulir sampai akhir, semuanya bagus.
3. Ubah kembali konten menjadi 6 item, gulir hingga item terakhir, tetapi saya dapat melanjutkan menggulir di ruang putih yang tampaknya tersisa dari konten sebelumnya (kumpulan data 20 item).

Saya mengalami masalah yang sama

Inilah yang saya butuhkan.
Saya baru saja menguji DynamicSizeList dari 1.6.0-alpha.1 dalam kombinasi dengan react-virtualized-auto-sizer dan react-window-infinite-loader dengan hasil yang sangat bagus.
Ada yang bisa saya bantu untuk membuat ini bergerak maju?

Halo @bvaughn , apakah Anda punya waktu untuk memeriksa kode dan kotak dari https://github.com/bvaughn/react-window/issues/6#issuecomment -509213284?

Hai, saya menggunakan DynamicSizeList untuk aplikasi obrolan saya.
Terima kasih untuk fitur yang luar biasa.

Namun, saya memiliki masalah dengan kinerja yang buruk dan banyak pemrosesan skrip.
Saat di-scroll, CPU selalu naik dan sering mencapai 100%.
Apakah Anda punya ide untuk solusinya?

import { useChatList } from '../../../hooks/chat/useChatList';
import LoadingSpinner from '../../../utils/LoadingSpinner';

import dynamic from 'next/dynamic';
import * as React from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
// @ts-ignore
import { DynamicSizeList as List } from 'react-window';
import { Message } from 'src/app/typings';

const { useRef, useCallback } = React;

const RowItem = React.memo(
  ({ forwardedRef, style, index, data }: any) => {
    const item = data[index] as Message;
    if (item) {
      return (
        <div id={item.messageId} ref={forwardedRef} style={style}>
          {item.text && item.text.plainText}
        </div>
      );
    }
    return null;
  },
  (prevProps, newProps) => {
    const { index, data } = prevProps;
    const { index: newIndex, data: newData } = newProps;
    let isMemo = true;
    isMemo = isMemo && index === newIndex;
    isMemo = isMemo && data.length === newData.length;
    return isMemo;
  }
);

function ChatList() {
  const listRef = useRef<HTMLInputElement>();

  const { formatMessages: messages, isLoadingMessages } = useChatList();

  const keyCreator = useCallback((index: number) => `ChatList/RowItem/${messages[index].messageId}`, [messages]);

  if (isLoadingMessages && (!messages || messages.length <= 0)) {
    return <LoadingSpinner />;
  }
  return (
    <div style={{ flex: 1, height: '100%', width: '100%' }}>
      <AutoSizer>
        {({ height, width }) => (
          <List
            ref={(lref: HTMLInputElement) => {
              if (lref !== null) {
                listRef.current = lref;
              }
            }}
            itemCount={messages.length}
            itemData={messages}
            itemKey={keyCreator}
            height={height}
            width={width}
            overscanCount={10}
          >
            {React.forwardRef((props, ref) => (
              <RowItem forwardedRef={ref} {...props} />
            ))}
          </List>
        )}
      </AutoSizer>
    </div>
  );
}

export default ChatList;

Halo @bvaughn , kerja bagus!
Apa cara yang benar untuk menghitung ulang ketinggian item saat mengubah ukuran tempat kerja? Dengan bantuan komentar di atas, saya membuat beberapa demo https://codesandbox.io/s/angry-hill-tcy2m
Ketika lebar tempat kerja berubah dengan mouse, saya perlu menghitung ulang semua tinggi item (dan mungkin membersihkan cache tinggi internal dari komponen VariableSizeList) ...

apakah ada solusi sekarang untuk daftar dinamis saya hanya menghabiskan 4 jam mencoba membuatnya bekerja ya
setelah membaca semua komentar saya selesai 😠
Jika kalian memiliki solusi yang berfungsi, tolong berikan saya

Tidak ada "kalian" dalam proyek ini. Itu dikelola oleh satu orang.

Dan agak tidak bijaksana untuk meninggalkan komentar tentang berbagai masalah pada hari yang sama mengeluh tentang hal yang sama. Dengan segala cara, silakan gunakan react-virtualized.

Saya sangat menyesal telah meninggalkan komentar seperti Brian ini. Saya menemukan masalah ini nanti dan kemudian membaca semua komentar dan saya pikir orang lain membantu Anda setidaknya

@ShivamJoker Saya hampir membuatnya berfungsi, satu-satunya hal yang tersisa agar berfungsi dengan sempurna adalah tinggi total yang terus bertambah tetapi tidak pernah menyusut setelah mengubah konten menjadi lebih sedikit item. Jika ini terpecahkan, dalam kasus penggunaan saya tampaknya akan bekerja dengan sempurna.

@bvaughn, apakah Anda punya waktu untuk memeriksa contoh di kotak pasir dari https://github.com/bvaughn/react-window/issues/6#issuecomment -509213284?

=> https://codesandbox.io/s/sweet-sea-irxl8

Ini dimulai dengan daftar yang lebih pendek, oleh karena itu:

• gulir ke bawah hingga akhir daftar
• gulir kembali ke atas dan klik Show Long List
• gulir ke bawah sampai akhir
• gulir kembali ke atas dan klik Show Short List
• Terakhir gulir ke bawah untuk terakhir kalinya untuk melihat bahwa daftar singkat sekarang diikuti oleh banyak ruang kosong.

Terima kasih!

@ShivamJoker Saya hampir membuatnya berfungsi, satu-satunya hal yang tersisa agar berfungsi dengan sempurna adalah tinggi total yang terus bertambah tetapi tidak pernah menyusut setelah mengubah konten menjadi lebih sedikit item. Jika ini terpecahkan, dalam kasus penggunaan saya tampaknya akan bekerja dengan sempurna.

@bvaughn, apakah Anda punya waktu untuk memeriksa contoh di kotak pasir dari # 6 (komentar) ?

=> https://codesandbox.io/s/sweet-sea-irxl8

Ini dimulai dengan daftar yang lebih pendek, oleh karena itu:

• gulir ke bawah hingga akhir daftar
• gulir kembali ke atas dan klik Show Long List
• gulir ke bawah sampai akhir
• gulir kembali ke atas dan klik Show Short List
• Terakhir gulir ke bawah untuk terakhir kalinya untuk melihat bahwa daftar singkat sekarang diikuti oleh banyak ruang kosong.

Terima kasih!

Ya, pada dasarnya wadah dalam harus mengatur ulang ketinggiannya setelah penyaringan / perubahan data.

@ShivamJoker Saya hampir membuatnya berfungsi, satu-satunya hal yang tersisa agar berfungsi dengan sempurna adalah tinggi total yang terus bertambah tetapi tidak pernah menyusut setelah mengubah konten menjadi lebih sedikit item. Jika ini terpecahkan, dalam kasus penggunaan saya tampaknya akan bekerja dengan sempurna.

@bvaughn, apakah Anda punya waktu untuk memeriksa contoh di kotak pasir dari # 6 (komentar) ?

=> https://codesandbox.io/s/sweet-sea-irxl8

Ini dimulai dengan daftar yang lebih pendek, oleh karena itu:

• gulir ke bawah hingga akhir daftar
• gulir kembali ke atas dan klik Show Long List
• gulir ke bawah sampai akhir
• gulir kembali ke atas dan klik Show Short List
• Terakhir gulir ke bawah untuk terakhir kalinya untuk melihat bahwa daftar singkat sekarang diikuti oleh banyak ruang kosong.

Terima kasih!

terima kasih saya telah menerapkan harapan yang sama untuk bekerja dengan baik untuk pengguna lain juga
dan ya saya juga melihat bahwa masalah ketinggian dengan gulungan

@ graphee-gabriel tetapi saya juga mengalami satu masalah lagi yang biasa disembunyikan bilah aplikasi saya saat menggulir ke bawah yang tidak terjadi sekarang, apa solusinya?

Selamat siang. Saya menggunakan DinamycSizeList dalam proyek demo saya. Semuanya baik-baik saja, tetapi setelah beberapa saat saya perhatikan bahwa komponen daftar mulai bekerja secara tidak benar. Pada awalnya saya pikir itu adalah beberapa perpustakaan yang bergantung pada jendela reaksi. Tapi lihat demo Anda
https://react-window-next.now.sh/#/examples/list/dynamic -size
memperhatikan tentang hasil yang sama, meskipun di masa lalu itu juga bekerja dengan sempurna. Bisakah Anda menyarankan penyebab bug ini?

@simeono

Ya, pada dasarnya wadah dalam harus mengatur ulang ketinggiannya setelah penyaringan / perubahan data.

bagaimana saya harus melakukannya saya mencoba meletakkan ketinggian negara tetapi tampaknya tidak berhasil
ada solusi?

@simeono

Ya, pada dasarnya wadah dalam harus mengatur ulang ketinggiannya setelah penyaringan / perubahan data.

bagaimana saya harus melakukannya saya mencoba meletakkan ketinggian negara tetapi tampaknya tidak berhasil
ada solusi?

Ini harus diimplementasikan secara internal oleh perpustakaan.

@ShivamJoker Saya hampir membuatnya berfungsi, satu-satunya hal yang tersisa agar berfungsi dengan sempurna adalah tinggi total yang terus bertambah tetapi tidak pernah menyusut setelah mengubah konten menjadi lebih sedikit item. Jika ini terpecahkan, dalam kasus penggunaan saya tampaknya akan bekerja dengan sempurna.

@bvaughn, apakah Anda punya waktu untuk memeriksa contoh di kotak pasir dari # 6 (komentar) ?

=> https://codesandbox.io/s/sweet-sea-irxl8

Ini dimulai dengan daftar yang lebih pendek, oleh karena itu:

• gulir ke bawah hingga akhir daftar
• gulir kembali ke atas dan klik Show Long List
• gulir ke bawah sampai akhir
• gulir kembali ke atas dan klik Show Short List
• Terakhir gulir ke bawah untuk terakhir kalinya untuk melihat bahwa daftar singkat sekarang diikuti oleh banyak ruang kosong.

Terima kasih!

Anda dapat mengatur kunci untuk mencegah spasi kosong.
https://codesandbox.io/s/blissful-voice-mzjsc

Halo @bvaughn, terima kasih atas proyek luar biasa ini!

Karena kebutuhan, saya telah menghabiskan cukup banyak waktu dalam kode DynamicLists mencoba mencari cara untuk menggulir ke mana saja tanpa batasan apa pun dan bagaimana menggulir ke item apa pun, diukur dan tidak.

Saya berhasil melakukannya di sini https://github.com/bvaughn/react-window/compare/issues/6...Sauco82 : issues / 6 dengan menyingkirkan lastMeasuredIndex dan memeriksa per item sebagai gantinya dengan itemIsMeasured , yang pada gilirannya membutuhkan banyak perubahan lainnya.

Saya tidak pernah berpartisipasi dalam proyek open source atau menggunakan Flow, jadi saya tidak yakin apakah ini berguna atau layak untuk dimasukkan, atau apakah saya harus langsung mencoba PR atau mendiskusikannya di sini.

Saya dengan senang hati membantu dan menyesuaikan, jadi jika Anda membutuhkan sesuatu, beri tahu saya.

Hei, inilah solusi yang jauh lebih sederhana (tidak perlu menambahkan elemen hantu ke DOM untuk menghitung ukurannya):
Codesandbox

Hei, inilah solusi yang jauh lebih sederhana (tidak perlu menambahkan elemen hantu ke DOM untuk menghitung ukurannya):
Codesandbox

Hebat! Ini bekerja untuk saya. Pekerjaan yang baik.

Ukuran yang dihitung
dan panggilan itemSize sekali

@ userb201 @solusi yang bagus! Entah bagaimana dalam kasus saya itu tidak berhasil di luar kotak, saya harus memodifikasi kode ChatHistory.js seperti ini:

    const listRef = useRef(); // added
    const sizeMap = useRef({});
    const setSize = useCallback((index, size) => {
        sizeMap.current = {...sizeMap.current, [index]: size};
        listRef.current.resetAfterIndex(index); // added
    }, []);
    const getSize = useCallback(index => sizeMap.current[index] || 60, []);
    // ...
    <List ref={listRef}

Jika tidak, semua item akan dirender dengan tinggi default yang sama. Dalam kasus Anda, ini berfungsi sebagaimana mestinya , saya tidak dapat menjelaskan mengapa ada perbedaan ... mungkin

@bvaughn bagaimana jika kita harus mengaktifkan perilaku serupa untuk RSK? ada petunjuk untuk sisi itu?

@bvaughn Ini saya atau demo Anda tidak berfungsi?

Implementasi yang bagus @Kashkovsky @ kir-konshin dan @ userbq201 !

Bagaimana pendekatan Anda menggunakan memoization dengan solusi ini?

Saya mencoba membungkus ChatMessage di memo dengan areEqual , tetapi React masih merender ulang setiap objek setiap kali pesan ditambahkan ke daftar.

Di FixedSizedLists saya yang lain, memoization berfungsi dengan baik dengan pembungkus memo / areEqual itu, tetapi mungkin ref={root} memengaruhinya?

Anda dapat dengan mudah mengetahui apakah React sedang merender ulang komponen dengan menggunakan file

Saya membagi contoh di sini: https://codesandbox.io/s/dynamic-size-of-react-window-list-items-nb038

EDIT: Saya memperbaiki memoization - itu dimaksudkan untuk membungkus komponen fungsional awal dengan memo - bukan seperti yang telah saya lakukan. Berikut adalah solusi yang dimoisasi jika ada yang memiliki struktur DOM yang kompleks di dalam daftar mereka (atau jika mereka harus memetakan video seperti yang saya lakukan): https://codesandbox.io/s/dynamic-size-of-react-window-list -items-errt4

EDIT 2: Ternyata rendering awal baris benar-benar baik-baik saja, tetapi memanggil resetAfterIndex sangat sulit untuk dikelola. Data saya berubah (misalnya ketika pengguna memilih percakapan yang berbeda). Tetapi masalah sebenarnya adalah bahwa resetAfterIndex tampaknya berjalan sebelum setSize dapat selesai. Jadi itu berhasil menghapus gaya yang di-cache, tetapi kemudian itu hanya menghasilkan cache baru dari gaya lama lagi karena browser belum selesai mengubah ukuran konten.

Tidak yakin apakah itu masuk akal secara tertulis tetapi saya harus memasang pin yang satu ini untuk saat ini. Beri tahu saya jika ada yang berhasil mengubah konten mereka secara dinamis dan mempertahankan gaya ketinggian yang diperbarui.

Saya memiliki banyak implementasi react-window lainnya jadi saya lebih suka menemukan solusi yang baik di sini daripada menggunakan react-virtualized untuk kasus penggunaan yang satu ini.

EDIT 3: Ini akan menjadi hasil edit terakhir saya karena saya akhirnya menemukan solusi semi-elegan.

1.) Jika itemData perlu diubah (yaitu saat percakapan berubah), lepaskan semuanya komponen dan kemudian pasang kembali dengan itemData baru. Ini dapat dilakukan menggunakan panggilan balik setState. Ini memastikan bahwa gaya ketinggian lama tidak terbawa saat Anda mengubah data.

2.) Saya melewati {sizeMap, setSize, listRef} menjadi ChatMessage melalui ChatContext . Dengan begitu, alih-alih hanya mengatur ukuran secara membabi buta, saya dapat memberi tahu ChatMessage untuk mengatur ukuran DAN membandingkannya dengan ukuran lama. Jika ukuran lama berbeda dari ukuran baru, panggil resetAfterIndex mulai dari index dan berikan true untuk memaksa pembaruan.

Jadi ChatMessage baru saya terlihat seperti ini:

const ChatMessage = ({ message, index }) => {
    const { setSize, sizeMap, listRef } = useContext(ChatContext);
    const root = React.useRef();
    useEffect(() => {
        let oldSize = sizeMap[index];
        let newSize = root.current.getBoundingClientRect().height;
        setSize(index, newSize);
        if(newSize !== oldSize){
            listRef.current.resetAfterIndex(index,true);
        }
    }, [sizeMap, setSize, listRef]);

    return (
        <div ref={root}
             {message.body}
        </div>
    );
};
export default ChatMessage;

3.) Saya menambahkan apa yang pada dasarnya adalah pendengar di komponen yang menunggu untuk dipasang baru untuk diberikan. Setelah di-render, lalu scroll ke bawah. Ini memperbaiki masalah dengan mencoba menempatkan fungsi scrollTo secara langsung di componentDidMount karena tidak pernah dirender sebelum metode itu dipanggil. Begitu terlihat seperti ini:

class Chat extends Component {
    constructor(props) {
        super(props);
        this.listRef = createRef();
        this.state = {
            initialScrollComplete: false,
            interval: null
        };
    }

    componentDidMount(){
        // Create interval to check if list is ready. Once ready, scroll to bottom of list.
        this.setState({interval: setInterval(()=>{
            if(this.listRef.current && !this.state.initialScrollComplete){
                this.listRef.current.scrollToItem(this.props.chatHistory.length - 1, "end");
                this.setState({initialScrollComplete: true});
            }
        },25)});
    }

    componentDidUpdate(prevProps, prevState) {

        // Clear interval if scroll has been completed
        if(!prevState.initialScrollComplete && this.state.initialScrollComplete){
            clearInterval(this.state.interval);
            this.setState({interval: null});
        }

        // If new message is transmitted, scroll to bottom
        if(prevProps.chatHistory && this.props.chatHistory && prevProps.chatHistory.length !== this.props.chatHistory.length){
            this.listRef.current.scrollToItem(this.props.chatHistory.length - 1, "end");
        }

    }

    render() {
        return <ChatHistory listRef={this.listRef} chatHistory={this.props.chatHistory}/>;
    }
}

Sepertinya ada tingkah laku yang sangat aneh di safari.

Tinggi div DynamicSizedList dan tinggi atau margin atas baris tidak berfungsi dengan benar, konten mulai tumpang tindih.

Ketika lebar jendela / konten baris berubah, tinggi baru tidak dihitung ulang atau diubah untuk bekerja dengan tinggi baru konten.

Sesuatu yang tampaknya memperbaikinya adalah jika konten dapat di-scroll, menggulir ke titik di mana baris tidak terlihat lagi, menggulir kembali ke atas untuk membuatnya dirender dengan benar.

Konten tidak dirender dengan benar pada pemuatan halaman pertama sehingga menyegarkan tampaknya tidak menyelesaikan masalah: /

Semuanya berfungsi dengan baik di browser lain termasuk chrome dan firefox. Safari sangat memukau, tetapi sayangnya aplikasinya masih harus berfungsi untuk orang yang menggunakannya.

Saya sungguh memerlukan beberapa bantuan!

@tastyqbit Saya juga mengalami masalah yang sama di Safari dan Internet Explorer. Seperti yang Anda sebutkan, menggulir melewati baris yang diperluas dan kemudian menggulir ke belakang memungkinkannya merender dengan benar, tetapi tentu saja itu tidak benar-benar menyelesaikan masalah.

Jika Anda menemukan solusi, beri tahu saya!

@afreix @tastyqbit Saya cukup yakin masalah Anda di Safari dan Internet Explorer disebabkan oleh kurangnya dukungan untuk ResizeObserver di browser tersebut. Saya benar-benar memiliki masalah Anda (menggulir ke belakang untuk memperbaikinya) dan menambahkan polyfill menyelesaikannya untuk saya. Lihat MDN untuk tabel kompatibilitas.

Saya pikir kurangnya ResizeObserver harus menghasilkan peringatan di konsol.

Bagaimana dengan sesuatu seperti ini https://codesandbox.io/s/agitated-jennings-o9nn6 ?

dasar menggunakan VariableSizeList + ItemMeasurer dari # 102 Saya tahu ini adalah pendekatan yang sangat naif tetapi sepertinya itu berfungsi (tidak seburuk itu 😂) sebagai solusi sementara 🤔

Dalam tim kami, kami menemukan kebutuhan untuk membuat daftar besar data tekstual berukuran acak.
Bagi kami kemampuan untuk melompat secara akurat di antara item dan menggulir tanpa jeda adalah suatu keharusan.
Setelah cukup lama mencari online, saya menyerah dan menulis perpustakaan ini .
Semoga membantu sebagai solusi sementara untuk beberapa dari Anda: smile_cat:

Hei,
Hanya ingin memperbaruinya setelah beberapa pekerjaan, saya pikir perpustakaan datang ke keadaan yang layak dan bisa menjadi solusi yang baik jika item Anda tidak mengubah ukurannya setelah dirender untuk pertama kalinya.

@ gnir-work bagaimana jika ukuran jendela berubah dan ukuran penampung berubah menyebabkan daftar diubah ukurannya?

Membaca utas ini dan saya pikir mungkin ada cara yang lebih baik untuk menangani item yang memiliki lebar yang dapat berubah.

Definisi 'variabel' di sini adalah variabel di seluruh himpunan. Ukuran item sebenarnya statis, tidak dinamis. Mungkin dinamika adalah istilah yang lebih baik karena ukurannya dapat berubah selama pengubahan ukuran atau mutasi jika teks berubah.

Cara ini bisa bekerja adalah dengan mendengarkan scrolling pada induknya.

Algoritme akan bekerja seperti ini:

• menghitung perkiraan ukuran untuk setiap item - ini harus sangat efisien. Tidak harus sempurna. + - 20% baik-baik saja.

• kami hanya merender item yang terlihat + katakan 20% lebih sehingga jika pengguna menggulir mereka tidak melihat perubahan apa pun

• Kami memiliki 'hantu' untuk segala sesuatu yang memiliki 'ketinggian' diatur ke perkiraan ketinggian. Itu hanya div kosong. Dengan cara ini bilah gulir terlihat ke kanan.

• Sebuah item hanya ditampilkan saat berada di viewport. Selain itu item hantu ditampilkan.

Satu-satunya downside adalah bahwa tinggi scrollbar akan sedikit berubah. Saya tidak yakin apakah ini akan mengganggu pengguna. Bisa jadi jika daftar gulirnya besar. Kami MUNGKIN dapat mengelabui ini dengan menambah / mengurangi buffer sedemikian rupa sehingga perkiraan ukuran tidak memengaruhi panjang bilah gulir.

@ gnir-work bagaimana jika ukuran jendela berubah dan ukuran penampung berubah menyebabkan daftar diubah ukurannya?

Pada versi terbaru ( 2.2.0 ) komponen mendukung perubahan ukuran seluruh daftar (tinggi dan lebar).

Membaca utas ini dan saya pikir mungkin ada cara yang lebih baik untuk menangani item yang memiliki lebar yang dapat berubah.

Definisi 'variabel' di sini adalah variabel di seluruh himpunan. Ukuran item sebenarnya statis, tidak dinamis. Mungkin dinamika adalah istilah yang lebih baik karena ukurannya dapat berubah selama pengubahan ukuran atau mutasi jika teks berubah.

Cara ini bisa bekerja adalah dengan mendengarkan scrolling pada induknya.

Algoritme akan bekerja seperti ini:

• menghitung perkiraan ukuran untuk setiap item - ini harus sangat efisien. Tidak harus sempurna. + - 20% baik-baik saja.
• kami hanya merender item yang terlihat + katakan 20% lebih sehingga jika pengguna menggulir mereka tidak melihat perubahan apa pun
• Kami memiliki 'hantu' untuk segala sesuatu yang memiliki 'ketinggian' diatur ke perkiraan ketinggian. Itu hanya div kosong. Dengan cara ini bilah gulir terlihat ke kanan.
• Sebuah item hanya ditampilkan saat berada di viewport. Selain itu item hantu ditampilkan.

Satu-satunya downside adalah bahwa tinggi scrollbar akan sedikit berubah. Saya tidak yakin apakah ini akan mengganggu pengguna. Bisa jadi jika daftar gulirnya besar. Kami MUNGKIN dapat mengelabui ini dengan menambah / mengurangi buffer sedemikian rupa sehingga perkiraan ukuran tidak memengaruhi panjang bilah gulir.

Ini sudah diterapkan oleh @bvaughn di react-virtualized . Kelemahan utama dari pendekatan ini adalah bahwa melompat ke baris tertentu tidak berfungsi dengan baik dan menciptakan bug visual saat menggulir ke atas.

@ gnir-work ah .. ok ... mungkin saya akan membatalkan pekerjaan saya dan melihat react-virtualized.

Saya pikir Anda benar dengan masalah gulir ke atas tetapi saya pikir saya dapat memperbaikinya dengan memiliki 'perkiraan ukuran', dan kemudian mengubahnya menjadi ukuran sebenarnya setelah komponen dipasang.

... tetapi masalah lain tentu saja adalah menangani konten dinamis. Jika sesuatu memperbarui tinggi komponen berubah.

Jika perkiraan ukuran akurat daripada yang mungkin berhasil, Misalnya saya menerapkan beberapa waktu lalu daftar virtual dengan ketinggian dinamis dengan react-virtualized dan berfungsi dengan baik selama perkiraan ukurannya tepat. Jika tidak, fungsionalitas gulir ke baris akan merusak aplikasi saya ☹

Dikirim dari Mail untuk Windows 10

Dari: Kevin Burton
Dikirim: Selasa, 14 April 2020 23:07
Untuk: bvaughn / react-window
Cc: Nir Geller; Menyebut
Subjek: Re: [bvaughn / react-window] Mendukung konten terukur just-in-time (# 6)

@ gnir-work ah .. ok ... mungkin saya akan membatalkan pekerjaan saya dan melihat react-virtualized.
Saya pikir Anda benar dengan masalah gulir ke atas tetapi saya pikir saya dapat memperbaikinya dengan memiliki 'perkiraan ukuran', dan kemudian mengubahnya menjadi ukuran sebenarnya setelah komponen dipasang.
... tetapi masalah lain tentu saja adalah menangani konten dinamis. Jika sesuatu memperbarui tinggi komponen berubah.
-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub, atau berhenti berlangganan.

-
Email ini telah diperiksa dari virus oleh perangkat lunak antivirus Avast.
https://www.avast.com/antivirus

@ gnir-work ah ... Saya rasa tidak memerlukan fungsionalitas 'scroll to row' .. meskipun mungkin saya salah.

Bahwa ini sudah cukup untuk kebutuhan Anda 😊

Dikirim dari Mail untuk Windows 10

Dari: Kevin Burton
Dikirim: Selasa, 14 April 2020 23:13
Untuk: bvaughn / react-window
Cc: Nir Geller; Menyebut
Subjek: Re: [bvaughn / react-window] Mendukung konten terukur just-in-time (# 6)

@ gnir-work ah ... Saya rasa tidak memerlukan fungsionalitas 'scroll to row' .. meskipun mungkin saya salah.
-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub, atau berhenti berlangganan.

-
Email ini telah diperiksa dari virus oleh perangkat lunak antivirus Avast.
https://www.avast.com/antivirus

Sebagai solusinya jika:

• tinggi baris daftar Anda hanya bergantung pada teks bagian dalam (ditambah mungkin beberapa elemen dengan dimensi yang ditentukan)
• dan daftar Anda memiliki lebar tetap

Anda bisa menggunakan CanvasRenderingContext2D.measureText () untuk menghitung tinggi baris daripada merender seluruh komponen: poop:

CodeSandbox

@bvaughn Ada rencana untuk menerbitkan versi alfa baru di npm? Kami belum mendapatkan pembaruan apa pun sejak 1.6.0-alpha.1 😕

@bvaughn ada pembaruan? apakah itu akan diperbaiki dalam versi terbaru?

Bagi mereka yang ingin menggunakan Ketikan dengan DynamicSizeList - augmentasi modul dapat memberikan jenis yang diperlukan untuk DynamicSizeList bekerja dari definisi DefinitelyTyped (solusi untuk kueri saya yang diposting di utas ini tahun lalu).

Tambahkan ikuti ke proyek:

import React, { Component } from 'react'

declare module 'react-window' {
  export type DynamicSizeListProps = Omit<FixedSizeListProps, 'itemSize' | 'scrollToItem'>
  export class DynamicSizeList extends Component<DynamicSizeListProps> {}
}

Lalu impor seperti biasa:

import {
  DynamicSizeList,
  DynamicSizeListProps,
} from 'react-window'

// use as normal...

@types/react-window masih harus diinstal terlebih dahulu untuk definisi FixedSizeListProps .

Terima kasih untuk typedef, akan menambahkannya sekarang! Saya telah menggunakan DynamicSizeList di prod selama lebih dari setahun sekarang. Saat ini berdasarkan garpu ini: "@john-osullivan/react-window-dynamic-fork": "^1.9.0-alpha.1" (apakah itu masih yang paling mutakhir?). Saya mencoba untuk beralih ke react-virtuoso karena ketidakpastian tentang apakah / kapan ini benar-benar akan dirilis. Tetapi merasa kurang berkinerja dan macet dengan ini.

@bvaughn apakah sudah waktunya untuk membuka jalan sapi dan melepaskan ini ke npm? Mungkin baru saja berganti nama menjadi ExperimentalDynamicSizeList jika Anda masih khawatir belum siap.

Hallo teman-teman! Terima kasih atas kerja keras Anda dan perpustakaan yang luar biasa ini. Saya sangat menantikan fitur ini! Namun, saya akan menyarankan untuk menambahkan informasi mengenai masalah ini ke README dan dokumentasi / contoh. Butuh beberapa waktu bagi saya untuk mengetahui bahwa konten dinamis sebenarnya tidak didukung oleh pustaka dan hanya berguna untuk item dengan ukuran tetap / yang diketahui. Saya yakin README memiliki bagian FAQ yang bagus di mana ini dapat ditambahkan.

jika Anda mencari tabel / kisi / pohon, ini akan menjadi awal yang baik https://autodesk.github.io/react-base-table/examples/dynamic-row-heights , dibangun di atas VariableSizeGrid

@ tony-scio dapatkah Anda membagikan kode dan kotak yang berfungsi untuk menggunakan DynamicSizeList dari 1.6.0-alpha.1 dengan InfiniteLoader? Terima kasih, saya akan sangat menghargainya.

Adakah yang berhasil membuat ini bekerja dengan react-beautiful-dnd? Menarik tampaknya membuat item melompat di atas satu sama lain.

Adakah yang berhasil membuat ini bekerja dengan react-beautiful-dnd? Menarik tampaknya membuat item melompat di atas satu sama lain.

saya juga akan menunggu jawaban ini: D

[TOLONG]
Tidak ada kode untuk ditampilkan di tautan ini:
dynamic-size-list-vertical
dan saya membutuhkan kemampuan ini.
TERIMA KASIH

[TOLONG]
Tidak ada kode untuk ditampilkan di tautan ini:
dynamic-size-list-vertical
dan saya membutuhkan kemampuan ini.
TERIMA KASIH

https://react-window-next.now.sh/#/examples/list/dynamic -size

Ada pembaruan tentang ini? Kami membutuhkan sesuatu yang serupa yang kami bisa (biasanya sangat sedikit, tetapi dalam beberapa kasus bisa banyak) membuat daftar petak responsif besar item (ketinggiannya dinamis dan akan berubah di ponsel karena berbagai teks membungkus dll). Saya merasa react-window akan menjadi pengubah permainan jika bisa menangani kasus penggunaan ini. Jika tidak, apakah ada alternatif yang dapat diandalkan?

Ada pembaruan tentang ini? Kami membutuhkan sesuatu yang serupa yang kami bisa (biasanya sangat sedikit, tetapi dalam beberapa kasus bisa banyak) membuat daftar petak responsif besar item (ketinggiannya dinamis dan akan berubah di ponsel karena berbagai teks membungkus dll). Saya merasa react-window akan menjadi pengubah permainan jika bisa menangani kasus penggunaan ini. Jika tidak, apakah ada alternatif yang dapat diandalkan?

@JavaJamie karena Anda secara khusus meminta alternatif - perpustakaan react-virtuoso dilengkapi dengan dukungan bawaan untuk mengukur konten dinamis. Penafian: Saya adalah pembuatnya.

@JavaJamie karena Anda secara khusus meminta alternatif - perpustakaan react-virtuoso dilengkapi dengan dukungan bawaan untuk mengukur konten dinamis. Penafian: Saya adalah pembuatnya.

react-virtuoso juga dua kali lipat ukuran react-window. Selalu harus mengingat ukuran ketergantungan.

https://bundlephobia.com/[email protected]
https://bundlephobia.com/[email protected]

Saya telah menerima kenyataan bahwa saya tidak punya waktu atau tenaga untuk menyelesaikan upaya ini. Jika ada yang ingin turun tangan dan menyelesaikan cabang yang saya mulai, saya akan menyambut baik bantuan Anda. (Lihat juga edisi # 302 untuk mengetahui bagaimana hal ini sesuai dengan rilis versi dua sebagai komponen List dan Grid .)

Kami akhirnya menerapkan sesuatu dari awal untuk ini seperti menggunakan sensor visibilitas yang bekerja dengan sangat baik.

Saya mungkin dapat menggunakan OSS atau mengarahkan kalian ke tempat yang tepat jika Anda ingin merobeknya dan membuat proyek baru atau memindahkannya ke sini.

Salah satu triknya adalah kami menggunakan 'blok' sehingga kami dapat meningkatkan kinerja. Pada dasarnya kami mengambil setiap baris, dan benar-benar memasukkannya ke dalam blok induk yang terdiri dari 25 item, lalu menukarnya jika perlu.

@burtonator itu akan sangat membantu

Adakah yang bisa memberikan implementasi bebas bug dari react-select dengan DynamicSizeList?
Saya tidak bisa membuatnya bekerja sama dengan baik.
Saat ini saya menghadapi 2 masalah (maaf tidak ada tangkapan layar):

1. Semua item memiliki style={position: absolute, left: 0, top: 0} yang tidak mengizinkan saya menggunakan gaya ini karena semua opsi berada di atas satu sama lain.
2. Jika saya tidak menggunakan style prop, daftar ditampilkan dengan baik, tetapi ketika saya menggulir sedikit, bagian dari daftar dengan opsi di dalamnya menyusut, sementara tinggi total tetap tidak berubah. Jadi, ketika saya menggulir, saya mendapatkan x piksel dari opsi aktual dan ruang putih panjang-x piksel.

Tidak dapat menemukan contoh yang berfungsi dari keduanya.
Saya akan perhatikan bahwa saya menggunakan garpu 1.9.0, di Chrome.

Sunting. Temukan jawabannya di sini di atas, di bagian komentar tersembunyi. https://github.com/bvaughn/react-window/issues/6#issuecomment -509016422

Satu penyederhanaan untuk masalah pengguliran adalah dengan menggunakan bilah gulir untuk menunjukkan indeks item dalam daftar, bukan posisi piksel, jika gulir berjarak lebih dari satu ketinggian viewport. Alih-alih mencoba "menggulir ke bawah" X piksel, komponen hanya merender item di sekitar indeks yang diinginkan. Setengah ke bawah membuat item pada indeks N / 2, dan di bawah membuat item pada indeks N-1.

Itu akan memungkinkan ibu jari langsung menggulir ke tengah atau akhir daftar, tanpa tertinggal ibu jari gulir saat komponen merender dan menghitung ukuran. Saat ini, untuk komponen VariableSizeList yang sangat panjang, hampir tidak mungkin untuk menggulir ke bawah karena kursor menyeret lebih cepat daripada gerakan jempol gulir.