perf: cache effect (#218) #223
Conversation
(cherry picked from commit 80f1368) # Conflicts: # src/hooks/useGlobalCache.tsx
📝 WalkthroughWalkthrough本次变更在 Changes
Sequence Diagram(s)sequenceDiagram
participant Component
participant useGlobalCache
participant effectMap
Component->>useGlobalCache: 渲染/调用
useGlobalCache->>effectMap: 检查 fullPathStr 是否存在
alt effectMap 不存在 fullPathStr
useGlobalCache->>useGlobalCache: 调用 onCacheEffect
useGlobalCache->>effectMap: 添加 fullPathStr
useGlobalCache->>effectMap: 微任务后移除 fullPathStr
else 已存在
useGlobalCache-->>Component: 跳过 onCacheEffect
end
useGlobalCache->>effectMap: register 清理时移除 fullPathStr
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/first-render.tsxOops! Something went wrong! :( ESLint: 7.32.0 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. ✨ 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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #223 +/- ##
==========================================
+ Coverage 94.87% 94.89% +0.01%
==========================================
Files 33 33
Lines 2889 2900 +11
Branches 456 457 +1
==========================================
+ Hits 2741 2752 +11
Misses 148 148 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![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/hooks/useGlobalCache.tsx (1)
16-98: 完善的缓存效果控制机制整体而言，这个变更通过引入
effectMap和微任务调度，有效解决了可能的重复效果触发问题。这种实现方式保证了：
- 每个批量渲染周期内，每个缓存键的副作用只会被触发一次
- 使用微任务延迟清理 effectMap，确保跨渲染周期的正确行为
- 在组件卸载时正确清理映射状态
这是一个精心设计的性能优化，应该能显著减少不必要的样式计算和 DOM 操作。
考虑添加一个简短的注释，解释
effectMap的整体目的，例如：+// 用于跟踪每个缓存键的副作用是否已被触发，避免在同一批渲染中重复调用 const effectMap = new Map<string, boolean>();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/hooks/useGlobalCache.tsx(3 hunks)tests/animation.spec.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: preview
🔇 Additional comments (4)
tests/animation.spec.tsx (1)
182-214: 将测试函数改为异步并添加微任务延迟将测试函数更改为异步并在清除 DOM 样式后添加
await Promise.resolve()微任务延迟是一个重要的改进。这确保了样式注入相关的所有异步操作都能在重新渲染前完成，从而防止测试中出现竞态条件。这个改动与
useGlobalCache.tsx中的微任务延迟机制相协调，使测试更加可靠。src/hooks/useGlobalCache.tsx (3)
16-17: 添加 effectMap 以追踪已触发的缓存效果引入
effectMap用于跟踪哪些缓存键已经触发了效果回调，这是一个有效的优化。
89-98: 优化缓存效果，确保每个批量渲染周期仅触发一次这段新增代码通过检查
effectMap确保每个缓存键的副作用只在每个批量渲染周期中触发一次，显著提高了性能。通过微任务延迟清理映射表，巧妙地实现了批处理边界控制。注释解释了这种方法的意图，清晰地表明这是为了确保每个批量渲染中只触发一次效果。
110-111: 在清理回调中删除 effectMap 条目在注册的清理回调中删除
effectMap条目是一个必要的补充，确保了内存不会泄漏并且状态保持一致。
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
docs/examples/first-render.tsx (3)
1-4: 导入部分适当，但建议添加注释说明此示例的目的导入了必要的依赖和组件。基于文件名和功能，建议在顶部添加简短注释，说明此示例的主要目的是展示首次渲染性能和缓存效果的影响。
import React from 'react'; import './basic.less'; import Button from './components/Button'; +// 此示例用于演示大量组件首次渲染性能及CSS-in-JS缓存效果
33-40: UI文本需要国际化处理标题使用了中文，这可能不利于国际用户理解。建议考虑使用英文或添加国际化支持。
<div style={{ background: 'rgba(0,0,0,0.1)', padding: 16 }}> - <h3>默认情况下不会自动删除添加的样式</h3> + <h3>Styles are not automatically removed by default</h3>
1-50: 为Demo组件添加Props以提高复用性当前Demo组件硬编码了渲染10000个元素，建议将数量作为prop传入，增强组件的复用性和灵活性。
-const Demo = () => { +const Demo = ({ count = 10000 }) => { const renderStart = React.useRef(Date.now()); const [renderTime, setRenderTime] = React.useState(0); React.useEffect(() => { setRenderTime(Date.now() - renderStart.current); }, []); return ( <> <p>Render Time: {renderTime}ms</p> - {Array(10000) + {Array(count) .fill(1) .map((_, key) => (相应地，App组件需要更新为：
{show && ( <div> - <Demo /> + <Demo count={10000} /> </div> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/demo/first-render.md(1 hunks)docs/examples/first-render.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/demo/first-render.md
🧰 Additional context used
🧬 Code Graph Analysis (1)
docs/examples/first-render.tsx (1)
docs/examples/ssr-advanced.tsx (1)
Demo(9-43)
🔇 Additional comments (2)
docs/examples/first-render.tsx (2)
5-12: 性能测量方法实现良好使用
useRef记录初始渲染时间和useEffect计算渲染耗时的方法很合理。这能够准确捕获首次渲染的性能数据，有效展示缓存优化的效果。
30-32: 状态管理设计合理使用
useState来控制Demo组件的显示和隐藏很恰当，这样可以让用户手动触发渲染过程，有助于观察性能差异。
|
|
||
| {show && ( | ||
| <div> | ||
| <Demo /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
考虑添加更多上下文信息
当前示例缺乏与PR修改（缓存效果）的明确关联说明。建议添加解释文本，说明此示例如何展示缓存效果优化及其性能影响。
{show && (
<div>
+ <p>此示例展示了优化后的缓存效果如何提高大量样式组件的首次渲染性能。较低的渲染时间表明缓存效果改进有效。</p>
<Demo />
</div>
)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {show && ( | |
| <div> | |
| <Demo /> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |
| {show && ( | |
| <div> | |
| <p>此示例展示了优化后的缓存效果如何提高大量样式组件的首次渲染性能。较低的渲染时间表明缓存效果改进有效。</p> | |
| <Demo /> | |
| </div> | |
| )} |
🤖 Prompt for AI Agents (early access)
In docs/examples/first-render.tsx around lines 41 to 49, the example lacks clear
explanation linking it to the PR changes about caching effects. Add descriptive
text or comments in the component or nearby to explain how this example
demonstrates caching optimization and its impact on performance, providing
better context for readers.
2 participants
(cherry picked from commit 80f1368)
Conflicts:
src/hooks/useGlobalCache.tsx
Summary by CodeRabbit