Asked May 31st, 7:45 AM 50 0 0
  • 50 0 0
0

infinite scroll react native - inefficient

Share
  • 50 0 0

Làm thế nào để xây dựng vòng lặp vô tận với 1 list component 1 cách smooth nhất bằng react native? Hiện đang có một số thư viện hỗ trợ như here Kể cả có ý tưởng nhưng dường như là không hiệu quả, thao tác scoll đến cuối vẫn bị đứng và dật.

May 31st, 8:17 AM

Đúng rồi bạn, bởi vì 2 libs kia đang làm là khi scrollToBottom sẽ render thêm 1 bản data copy. Mình chưa hiểu rõ ý bạn hỏi lắm?

  1. Sao bạn muốn 1 list mà lại infinite scroll nhỉ? Mình đang hiểu nó giống như là 1 Slide
  2. Còn theo cách hiểu thứ 2 của mình là bạn đang có nhiều data quá và khi scroll càng nhiều xuống dưới thì sẽ gây ra tình trang lag, giật có khi crash.

Nếu bạn muốn hiển thị giống slide thì cũng có rất nhiều thư viện, còn bạn đang mắc với vấn đề số 2 thì mình có thể gíup nhá 😀

0
| Reply
Share
May 31st, 8:32 AM

@longnk1301 đúng là cách hiển thị theo slide, nhưng item đang được chọn sẽ được dùng làm việc khác ạ, item mình lấy từ api trả về tầm 20 ~ 30 items Please help mình với

0
| Reply
Share
May 31st, 8:37 AM

ios.gif nó sẽ giống popup như trong ảnh này, item sẽ được chọn và được push lên API ạ

0
| Reply
Share
May 31st, 8:43 AM

@ManCi Item được chọn thì có sao đâu bạn?? bạn vẫn render default thì lấy 10 data (bạn có thể sử dung redux), tiếp theo scroll thì lấy thêm 10, đến khi hết item thì cũng là hết cái listview đó, và Slider sẽ cuộn lại mà?

0
| Reply
Share
May 31st, 8:52 AM

@longnk1301 mình k hiểu ý bạn lắm, nhưng mình đã làm thử render 10 items rồi cuối list lại lấy thêm 10 items, mình đã làm cái này và đến đoạn lấy 10 items tiếp theo nó bị dật 1 phát lúc set lại state ạ, bạn demo nhẹ cho mình phát với, mình cám ơn nhiều

0
| Reply
Share
May 31st, 8:55 AM

@ManCi view này bạn render và setState mình thấy có vẻ nhiều, có thể là do chưa tối ưu code, bạn viết 1 hàm render, 1 function như nào nhỉ?

0
| Reply
Share
May 31st, 9:06 AM

bạn đang xử lý chọn xong là gửi nên server luôn??

0
| Reply
Share
May 31st, 9:11 AM

@longnk1301 để mình demo cậu xem, đợi xí nhé

0
| Reply
Share
May 31st, 9:14 AM

@ManCi được thì bạn cho mình xem function đoạn chọn item rồi setState nhá

0
| Reply
Share
May 31st, 9:19 AM
0
| Reply
Share
May 31st, 9:37 AM

@longnk1301 mình nghĩ vấn đề nằm ở chỗ code react native nó call api native nên chắc chắn sẽ có độ trễ vì vậy khó để làm được 1 cái infinite scroll mượt mà

0
| Reply
Share
May 31st, 9:43 AM

@ManCi em đang demo. đúng rồi bạn, vì mình scroll tới cuối là lại gọi lên server mà. Nếu không có nhiều data bạn có thể đợi gọi all data rồi hiển thị hết luôn xem sao

0
| Reply
Share
May 31st, 9:45 AM

@longnk1301 thực ra data có sẵn khi call api rồi, nên k cần gọi lại, nhưng hễ set state lại là dật ngay

0
| Reply
Share
May 31st, 9:46 AM

@ManCi checkScroll() bạn chuyển về arrow function thử chưa

0
| Reply
Share
May 31st, 9:50 AM

@longnk1301 cũng vậy à

0
| Reply
Share
Jun 3rd, 3:48 AM

@ManCi Mình test app của bạn thì thấy là do trong hàm checkScroll có nhiều if nên gây ra chậm và đang render key trùng nhau giờ mình có 2 giải pháp nhá.

  1. bạn nên optimize lại hàm checkScroll sao cho hợp lý, mỗi khi scroll tới cuối thì hãy tăng key cuối cùng nên 1 đơn vị tránh trùng nhau
  2. cách này mình thấy hiệu quả nhất, đó là ví dụ bạn có 100 object, default render 5 object, khi scroll được 20 object thì xoá các object phía trên đi, và nếu scroll lại thì render chèn vào lại, như vậy mình nghĩ sẽ nhanh hơn cách của bạn đang dùng bây giờ đấy 😄
0
| Reply
Share