Multiple react re-renderings when updating tree data
還沒有人認領這個 Issue。
評估
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 新手友好度
- 30/100
- Issue 類型
- 缺陷
- 描述清晰度
- 需要釐清
- 活躍度
- 停滯
- 技術堆疊
- react
- 領域
- frontend, performance
研究方向
從連結的 CodeSandbox 重現案例及其獨立視窗範例開始，接著在展開樹狀結構並切換一個元素時，確認 render 次數。完成的標準是：重現出的更新會造成一次 rc-tree render，同時保留所報告為正確的單次 CustomTreeNode render。
由索引模型根據 Issue 內容生成。
描述
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:
- Expand all Elements
- Toggle Switch Button of single Element
- Internally: object
treeDatawill be completely recalculated and passed into rc-tree component - Expected results:
- I expect here, that rc-tree will be re-rendered 1 time (because
treeDatahas changed) - I expect here, that only single
CustomTreeNodewill be re-rendered, whichSwitchcomponent I have toggled on step 2.
- I expect here, that rc-tree will be re-rendered 1 time (because
- Actual results:
- rc-tree component re-rendered 3 times instead of 1 -> NOK
- only one
CustomTreeNodewill 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:
Re-rendering no.2:
Re-rendering no.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
- 主要語言
- TypeScript
- 星號
- 1.3k
- 分支
- 490
- 平均合併
- 42 分鐘
- 30 天內合併 PR
- 2
環境準備
我們還沒有檢查這個專案的環境設定檔。先看它的 README，通用步驟見我們的新手貢獻指南。
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
react-component/tree 的其他 Issue
-
難度 2/5 1-3 小時 新手友好度 55/100
react-component/tree#1068 · 1 則留言 ·
-
難度 5/5 一週以上 新手友好度 20/100
react-component/tree#983 ·
-
難度 3/5 1-2 天 新手友好度 35/100
react-component/tree#937 ·
-
難度 5/5 一週以上 新手友好度 25/100
react-component/tree#935 ·
-
難度 3/5 1-2 天 新手友好度 35/100
react-component/tree#929 ·
查看 react-component/tree 的全部 Issue
相似的 Issue
-
難度 1/5 1 小時以內 新手友好度 78/100
lichess-org/api#678 ·
-
難度 2/5 1-3 小時 新手友好度 84/100
PostHog/posthog.com#20628 ·
維護者通常 1 天內回覆
-
bug status:Needs Triage
難度 1/5 1 小時以內 新手友好度 92/100
jupyterlab/jupyterlab#19964 ·
維護者通常 1 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 78/100
agentscope-ai/QwenPaw#8064 · 1 則留言 ·
維護者通常 1 天內回覆
-
area: notebooks-jupyter bug theme: new notebook frontend
難度 2/5 1-3 小時 新手友好度 88/100
posit-dev/positron#16347 · 1 則留言 ·
維護者通常 1 天內回覆