Fix/ssr full display all invisibly
背景 & 复现方法: close https://github.com/react-component/menu/pull/665
期许: 在overflow ssr="full" 模式下, 在首次渲染所有 items 内容时, SEO友好且页面不闪烁
代码改动简述:
逻辑部分 在 ssr="full", shouldResponsive 为true时, 让首次 render 时会绘制所有 items(display prop 为true, css 宽度为0); message channel 执行更新 containerWidth itemWidths 等值(值虽有, 但都为0), 触发第二次 render
第2次 render 时所有 items(但display prop 为false, css 宽度则回归正常), 随后触发 layoutEffect, layoutEffect 更新 displayCount 为 data.length - 1, 同步开始第3次 render, render所有的 items 并绘制(此次display prop 为false, css 宽度正常)
随后等到 message channel 再次执行更新 itemWidths 等值, 触发第4次 render, 此时 itemWidths 赋有正确的值, 因此所有 items(display prop 为 true, css 宽度正常), 后触发 layoutEffect, 更新 displayCount 为正确的计算结果. 同步开始第5次render, 并正确绘制出应该可见的 items
更新 ssr 相关测试
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| overflow | ❌ Failed (Inspect) | Oct 14, 2023 1:54am |
Codecov Report
Merging #41 (3e9f5b2) into master (0553047) will decrease coverage by
1.18%. The diff coverage is83.33%.
:exclamation: Current head 3e9f5b2 differs from pull request most recent head 411fb3b. Consider uploading reports for the commit 411fb3b to get more accurate results
@@ Coverage Diff @@
## master #41 +/- ##
==========================================
- Coverage 98.10% 96.92% -1.18%
==========================================
Files 6 6
Lines 211 228 +17
Branches 72 86 +14
==========================================
+ Hits 207 221 +14
- Misses 4 7 +3
| Files | Coverage Δ | |
|---|---|---|
| src/Overflow.tsx | 97.53% <83.33%> (-1.78%) |
:arrow_down: |
:mega: We’re building smart automated test selection to slash your CI/CD build times. Learn more