Tối ưu Performance với spliceData

Hiện tại em có một list object là feeds, bài toán của em đang làm là:

  • Cứ mỗi một khoảng thời gian sẽ gọi API để get các feed mới và thêm vào vị trí đầu mảng
  • Khi thêm các item mới vào thì sẽ có animation để highlight các item này mà không render lại các item cũ

Em tham khảo trên doc thì thấy có recommend sử dụng spliceData cùng với recycle-view để insert phần tử mới, tuy nhiên em gặp vấn đề là:

  • Các items mới không được thêm vào mảng feeds mà trong appData thì lại thêm 1 biến mới có key là ‘feeds.0’
  • Việc re-render đang bị random dẫn đến animation không đúng theo ý muốn

Nhờ các a xem qua giúp em có chỗ nào e đang dùng sai không ạ.

2 Likes

Hello em @buisihung11 .

Có sự thay đổi một chút ở chỗ spliceData mà docs chưa cập nhật, em dùng spliceData như thế này nhé:

      this.$spliceData(
        {
          feeds: [feeds.length, 0, ...newItems],
        },
        () => {
          console.log('feeds: ', this.data.feeds);
        },
      );

Còn việc re-render dẫn đến animation không theo ý muốn như thế nào á em.

1 Like

a có thể giải thích cách dùng cho e được không ạ, tại em muốn insert ở vị trí đầu tiên của mảng ạ

1 Like

chỗ rerender thì của em n đang bị render lại một cách ngẫu nhiên, a xem video sẽ thấy một số item bị trigger lại animation ạ

Feed component

Css animation

2 Likes

Cách dùng thế này nhé em:

this.$spliceData({ array: [currentArrayIndex, startNewArrayIndex, ...newArray] });

Trong đó:

  • currentArrayIndex: vị trí mà em muốn bỏ các phần tử mới vào, ở ví dụ trên anh dùng feeds.length, là anh muốn chèn vào cuối, nếu em muốn chèn vào đầu mảng thì em đổi chỗ này thành 0.
  • startNewArrayIndex: phần tử bắt đầu được thêm vào ở newArray, ví dụ newArray có 3 items: [0, 1, 2], nếu giá trị này là 1, thì nó sẽ chèn thêm giá trị là [1, 2] vào/
  • newArray: là các phần tử mới em muốn thêm vào

Ở trường hợp của em, em có thể dùng thế này:

this.$spliceData(
  {
    feeds: [0, 0, ...newItems],
  }
)
1 Like

Component recycle-view hiện tại chưa được hoàn chỉnh, nên em thử render bằng các thẻ view bình thường, nếu có issue perf thì hãy optimize tiếp nhé em.

2 Likes

dạ vâng, e làm được rồi cám ơn anh nhiều ạ :smiley:

2 Likes