perf: Optimize expandIcon rerender #746
Conversation
|
""" Walkthrough这次修改引入了一个 memo 化的变量 Changes
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
src/SubMenu/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/SubMenu/index.tsx (1)
230-245: 使用 useMemo 优化 expandIcon 渲染！通过将 Icon 组件封装到 useMemo 中可以有效避免不必要的重渲染，这是一个很好的性能优化。
不过，直接展开 props 可能会传递一些不必要的属性到 Icon 组件。建议只传递 Icon 组件所需的特定属性。
- props={{ - ...props, - isOpen: open, - isSubMenu: true, - }} + props={{ + className: props.className, + isOpen: open, + isSubMenu: true, + }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/SubMenu/index.tsx(2 hunks)
🔇 Additional comments (1)
src/SubMenu/index.tsx (1)
268-268: 优雅地使用了 memoized ExpandIconNode！将 memoized 组件替换原来的内联渲染方式，可以有效减少重渲染。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #746 +/- ##
=======================================
Coverage 99.59% 99.59%
=======================================
Files 27 27
Lines 736 738 +2
Branches 200 202 +2
=======================================
+ Hits 733 735 +2
Misses 3 3 ☔ View full report in Codecov by Sentry. |
Co-authored-by: afc163 <[email protected]>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
ci 挂了 |
好啦 |
| <i className={`${subMenuPrefixCls}-arrow`} /> | ||
| </Icon> | ||
| ), | ||
| [mode, mergedExpandIcon, props, open, subMenuPrefixCls], |
There was a problem hiding this comment.
props 每次应该都是新的，所以这个 expandIcon 还是会每次都调用。
There was a problem hiding this comment.
props 每次应该都是新的，所以这个 expandIcon 还是会每次都调用。
我试过了 不会重复调用了
优化 expandIcon 重复渲染问题
Summary by CodeRabbit