overflow icon indicating copy to clipboard operation
overflow copied to clipboard

Fix/ssr full display all invisibly

Open huan-qiu opened this issue 2 years ago • 2 comments

背景 & 复现方法: 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 相关测试

huan-qiu avatar Oct 14 '23 01:10 huan-qiu

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

vercel[bot] avatar Oct 14 '23 01:10 vercel[bot]

Codecov Report

Merging #41 (3e9f5b2) into master (0553047) will decrease coverage by 1.18%. The diff coverage is 83.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

codecov[bot] avatar Oct 17 '23 03:10 codecov[bot]