perf: 优化CardGroup 大数据量下的渲染性能

[saint3347]

Types of changes

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Others

Changelog

• 优化CardGroup 大数据量下的渲染性能

Summary by CodeRabbit

• 新功能

  • 更新了 CardGroup 组件至版本 3.4.5-beta.1，优化了处理大数据集时的渲染性能，提升用户体验。
  • 新增了 useInView 钩子，支持组件检测其是否在视口内。
  • 新增了懒加载的卡片组示例组件，改善加载体验。

• 文档

  • 更新了 CardGroup 组件的文档分类和标题，进行了本地化调整。

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

本次更改主要涉及多个文件的更新。package.json 文件的版本从 3.4.4 更新至 3.4.5-beta.1，标志着进入测试版阶段。packages/base/src/card-group/item.tsx 文件中，Item 组件引入了 useMemo 和 useInView 钩子，以增强组件的可见性控制。新创建的 useInView 钩子在 packages/hooks/src/common/use-in-view/use-in-view.ts 中实现，用于检测元素是否在视口内。此外，相关文档和示例文件也进行了相应的更新和新增。

Changes

文件路径	更改摘要
package.json	版本更新: "version": "3.4.4" → "version": "3.4.5-beta.1"
packages/base/src/card-group/item.tsx	添加 useMemo 和 useInView 钩子，定义 itemStyle 以控制组件可见性，更新 div 的 ref 属性。
packages/hooks/src/common/use-in-view/index.ts	添加导出: useInView 从 ./use-in-view 导出。
packages/hooks/src/common/use-in-view/use-in-view.ts	添加钩子 useInView，使用 IntersectionObserver API 检测元素可见性，包含状态变量。
packages/hooks/src/index.ts	添加导出: export * from './common/use-in-view';
packages/shineout/src/card-group/__doc__/changelog.cn.md	更新版本为 3.4.5-beta.1，优化 CardGroup 渲染性能。
packages/shineout/src/card-group/__doc__/index.md	更新组件分类、标题和描述的本地化内容。
packages/shineout/src/card-group/__example__/t-001-lazyout.tsx	新增实现懒加载的组件，包含多个接口和函数定义。

Possibly related PRs

• chore: release 3.3.6 #631: 此 PR 将 package.json 中的版本从 3.3.6-beta.6 更新至 3.3.6，与主 PR 的版本更新相似。
• release: 3.3.7 #663: 此 PR 将 package.json 中的版本从 3.3.7-beta.5 更新至 3.3.7，反映了从测试版到稳定版的过渡，类似于主 PR 的版本变更。
• chore: release 3.4.2 #690: 此 PR 将 package.json 中的版本从 3.4.2-beta.4 更新至 3.4.2，表示从测试版到稳定版的过渡，与主 PR 的更改类似。
• chore: changlog of 3.4.3 #715: 此 PR 将 package.json 中的版本从 3.4.3-beta.11 更新至 3.4.3，标志着从测试版到稳定版的过渡，与主 PR 的版本更新相似。
• fix: 修复 Popover.Confirm 的弹出容器的宽度在Table中有可能显示较窄的问题 #736: 此 PR 将 package.json 中的版本从 3.4.4-beta.7 更新至 3.4.4-beta.8，表示测试版的增量更新，与主 PR 的版本上下文相关。

🐇 在草地上跳跃，版本更新来临，
组件可见性，懒加载新生。
钩子引入视口，样式更灵动，
文档调整分类，变化总是美好。
让我们欢呼，代码更精彩，
兔子们一起，庆祝这次更新！ 🎉

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.