Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Multiple react re-renderings when updating tree data

Đang mở
  • Có gì không ổn?
#798 2 bình luận 4 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
30/100
Loại issue
Lỗi
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
react
Lĩnh vực
frontend, performance

Hướng nghiên cứu

Bắt đầu với bản tái hiện CodeSandbox được liên kết và ví dụ trong cửa sổ riêng, sau đó xác minh số lần render khi mở rộng cây và chuyển đổi một phần tử. Được xem là hoàn tất khi bản cập nhật được tái hiện gây ra một lần render rc-tree trong khi vẫn giữ lại lần render CustomTreeNode duy nhất được báo cáo là đúng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Disclaimer: I use the term re-renderings. By this term here I mean react re-renderings and not browser re-renderings.

I have prepared a code example to reproduce the issue: codesandbox
Code example can be tested in separate window: separate window

Steps to reproduce:

  1. Expand all Elements
  2. Toggle Switch Button of single Element
  3. Internally: object treeData will be completely recalculated and passed into rc-tree component
  4. Expected results:
    • I expect here, that rc-tree will be re-rendered 1 time (because treeData has changed)
    • I expect here, that only single CustomTreeNode will be re-rendered, which Switch component I have toggled on step 2.
  5. Actual results:
    • rc-tree component re-rendered 3 times instead of 1 -> NOK
    • only one CustomTreeNode will be re-rendered -> OK

Example video:
https://github.com/react-component/tree/assets/8103060/78917bcd-1e21-48ce-907a-4cc2082ff8d7

Duration of re-renderings from the video for rc-tree and all of its descendants:

  • re-rendering no.1: 11.6 ms
  • re-rendering no.2: 6.1 ms
  • re-rendering no.3: 13.5 ms
Re-rendering screenshots

Re-rendering no.1:
rerenreding-1

Re-rendering no.2:
rerenreding-2

Re-rendering no.3:
rerenreding-3

My questions are:

  • Is this a known behavior?
  • Is it possible to fix it? (reduce number of re-renderings from 3 to 1. This should improve performance dramatically (11.6ms vs 31.2 ms - almost 3 times faster)

Thank you for your work and thank you in advance

Ngôn ngữ chính
TypeScript
Star
1.3k
Fork
490
Merge trung bình
42 phút
Pull request đã merge (30 ngày)
2

Chuẩn bị môi trường

Chúng tôi chưa kiểm tra các tệp thiết lập môi trường của dự án này. Hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-component/tree

Tất cả issue của react-component/tree

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.