perf: Not render fully Popup on init #540
Conversation
Walkthrough本次变更主要涉及对弹出组件的渲染控制优化、示例代码的 ref 转发与组件结构调整，以及新增针对性能的测试用例。弹出组件现在仅在需要时才渲染，示例组件简化了 ref 逻辑，测试文件验证了弹出渲染的性能行为。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Trigger
participant Popup
User->>Trigger: 初始渲染
alt forceRender/mergedOpen/inMotion 为真
Trigger->>Popup: 渲染 Popup
else
Note over Trigger: 不渲染 Popup
end
User->>Trigger: 触发显示（如点击）
Trigger->>Popup: 渲染 Popup
Suggested reviewers
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
docs/examples/simple.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected][email protected]/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. src/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected][email protected]/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. tests/perf.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected][email protected]/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (2)
src/index.tsx (1)
658-708: 条件渲染实现优化了初始化性能使用
rendedRef.current作为条件来控制 Popup 组件的渲染是一个很好的优化。这确保了只有在需要时（打开状态、强制渲染或处于动画过渡中）才会渲染 Popup 组件树，避免了不必要的初始化开销。这与 PR 标题 "perf: Not render fully Popup on init" 的目标完全一致，是一个有效的性能改进。
这种按需渲染的模式非常适合用于其他类似的组件，特别是那些内容复杂但不总是可见的组件。这种优化在大型应用中尤为重要，可以显著减少初始渲染时间和内存使用。
docs/examples/simple.tsx (1)
3-3: 改进类型导入语法将
ActionType改为类型导入可以在构建时优化掉类型信息，减小最终的包体积。这是 TypeScript 中的最佳实践。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/examples/simple.tsx(4 hunks)src/index.tsx(2 hunks)tests/perf.test.tsx(1 hunks)
🔇 Additional comments (8)
src/index.tsx (1)
598-600: 添加性能优化的 rendedRef 实现这个变更通过引入
rendedRef引用来优化性能，使得 Popup 组件只在必要时才进行渲染。当forceRender、mergedOpen或inMotion任一为真时，才会标记为需要渲染。这是一个有效的性能优化，可以减少不必要的渲染操作。docs/examples/simple.tsx (3)
46-64: 使用 React.forwardRef 优化组件引用传递将
InnerTarget组件改为使用React.forwardRef是一个很好的改进，这样可以正确地将引用传递给底层 DOM 元素。这种模式使组件更容易与 React 的引用系统集成，特别是在与 Trigger 组件配合使用时。
88-88: 将 mask 默认值更改为 false将
mask的初始值从true改为false使示例更简洁。这个变更与主要的性能优化变更相符，因为不显示遮罩也能减少初始渲染的元素数量。
377-377: 简化组件结构直接使用
<InnerTarget />替代之前可能使用的<RefTarget />组件，简化了组件层次结构。这种简化与 PR 的目标一致，减少了不必要的组件嵌套，提高了代码的可读性和性能。tests/perf.test.tsx (4)
7-15: 模拟 Popup 组件以跟踪实例化次数这段代码通过模拟
Popup组件来跟踪其实例化次数，是一个测试性能优化效果的好方法。通过在全局对象上记录调用次数，可以有效验证条件渲染的行为。
52-65: 验证未打开时不创建 Popup这个测试用例验证了当 Popup 未打开时，不会创建 Popup 组件实例，这直接测试了
rendedRef条件渲染的行为。测试先确认初始状态下 Popup 未被创建，然后触发点击事件后才创建，这完全符合性能优化的预期。
67-79: 验证 forceRender 属性的行为这个测试验证了即使在 Popup 未打开的情况下，设置
forceRender为true也会创建 Popup 组件。这确保了rendedRef条件正确处理了forceRender属性，与实现中的逻辑一致。
81-100: 验证隐藏时保留 Popup 渲染这个测试确保了当 Popup 从可见变为隐藏状态时，Popup 组件仍然保持渲染状态而不是被卸载。这对于保证过渡动画的平滑性很重要，同时也验证了
rendedRef在此场景下的正确行为。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #540 +/- ##
==========================================
+ Coverage 97.68% 97.69% +0.01%
==========================================
Files 12 12
Lines 777 781 +4
Branches 230 225 -5
==========================================
+ Hits 759 763 +4
Misses 18 18 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
ref https://github.com/react-component/trigger/pull/538/files#r2077353602
Summary by CodeRabbit
新功能
修复
重构