refactor: Bubble.List re-render

[YumoImer]

fix: #402
fix: #481
fix: #442

• 优化 Bubble 组件的 avatar、content 区域的重复渲染
• 优化 Bubble.List 组件列表项的重复渲染问题

Push

• push 一条消息，仅有当前消息触发渲染。符合预期。

Unshift

• unshift 一条消息，仅有被插入的消息触发渲染。符合预期。

Delete

• delete 一条消息，其他消息没有触发渲染。符合预期。

ScrollTo

• 通过 listRef.current?.scrollTo 一条消息。符合预期。

Summary by CodeRabbit

Summary by CodeRabbit

• 性能优化

  • 在 Bubble 组件中使用 React.useMemo 优化渲染性能
  • 通过缓存 avatarNode 和 mergedContent 减少不必要的重新渲染

• 数据处理

  • 移除 useDisplayData 钩子
  • 简化 BubbleList 组件的数据管理流程
  • 直接使用 mergedData 处理列表渲染和滚动逻辑

• 新功能

  • 新增 Demo 组件用于调试和展示 Bubble 组件的功能
  • 在文档中增加调试列表示例代码

• 文档更新

  • 为 Bubble 组件的文档添加中英文调试列表示例说明

[coderabbitai]

📝 Walkthrough

概述

遍历

在 Bubble.tsx 文件中，主要通过使用 React.useMemo 对 avatarNode 和 mergedContent 变量进行性能优化。新的实现通过记忆化（memoization）这些变量，确保只有在特定依赖项发生变化时才重新计算，从而减少不必要的重新渲染。变更专注于性能改进，未改变组件的核心功能。

在 BubbleList.tsx 文件中，移除了 useDisplayData 钩子，直接使用 mergedData 进行数据处理。此变更简化了状态管理，并更新了与滚动和渲染相关的逻辑。删除的 useDisplayData.ts 文件原本用于管理和显示项目列表的自定义钩子，其功能已被替代。

此外，debug-list.md 和 debug-list.tsx 文件中新增了调试相关的内容与示例，以帮助开发者验证 Bubble.List 的行为。

变更

文件	变更摘要
components/bubble/Bubble.tsx	使用 React.useMemo 优化 avatarNode 和 mergedContent 的计算
components/bubble/BubbleList.tsx	移除 useDisplayData 钩子，直接使用 mergedData 进行数据处理，更新滚动和渲染逻辑
components/bubble/hooks/useDisplayData.ts	删除自定义钩子 useDisplayData
components/bubble/demo/debug-list.md	新增中文和英文调试说明
components/bubble/demo/debug-list.tsx	新增调试示例组件 Demo
components/bubble/index.en-US.md	新增调试列表示例代码
components/bubble/index.zh-CN.md	新增调试列表示例代码

评估与链接问题

目标	已解决	说明
历史消息如果内容没有变化，不应该更新 (#402)	✅

可能相关的 PRs

• refactor: code semantics #391: 此 PR 涉及 Bubble.tsx 文件中的性能优化，与主要 PR 相关。
• feat(bubble): add typing suffix support (#316) #380: 此 PR 涉及对 Bubble 组件的优化，与主要 PR 中的性能改进相关。

建议审阅者

• YumoImer

诗歌

🐰 兔子的性能优化诗 🚀
内存轻如风，渲染快如电
useMemo 护航，重绘不再烦
兔子代码跳，性能新篇展

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 914a608 and edb3690.

⛔ Files ignored due to path filters (2)

• components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
• components/bubble/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (3)

• components/bubble/BubbleList.tsx (5 hunks)
• components/bubble/index.en-US.md (1 hunks)
• components/bubble/index.zh-CN.md (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

• components/bubble/index.en-US.md
• components/bubble/index.zh-CN.md

⏰ Context from checks skipped due to timeout of 90000ms (6)

• GitHub Check: test / react component workflow
• GitHub Check: build preview
• GitHub Check: size
• GitHub Check: test / react component workflow
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: Cloudflare Pages

🔇 Additional comments (7)

components/bubble/BubbleList.tsx (7)

39-42: 引入 BubbleListItem 接口定义，明确了组件传递参数类型

这个接口定义清晰地扩展了 BubbleProps，并添加了一个用于唯一标识气泡项的 _key 属性。这有助于提高代码的类型安全性和可读性。

---

43-57: 封装了气泡项组件并优化了引用处理方式

使用 ForwardRefRenderFunction 创建的 BubbleListItem 组件有效地将每个气泡的引用分配到了一个键值对象中。这种实现方式很巧妙，支持了按键快速访问单个气泡的能力，对于滚动到特定消息等功能至关重要。

特别值得称赞的是 ref 回调的实现，它能够正确地处理组件的挂载和卸载情况。

---

59-59: 应用 React.memo 提高渲染性能

使用 React.memo 包装转发引用的 BubbleListItem 组件是一个很好的优化，可以有效减少不必要的重新渲染。这正是 PR 要解决的问题之一。

---

130-130: 更新对最后一项的引用方式

这里通过 mergedData[mergedData.length - 2]?.key 直接访问倒数第二项，替代了原先使用 displayData 的方式。确保在数组为空时安全处理，使用了可选链操作符。

---

146-146: 优化依赖数组

之前的依赖可能是 displayData.length，现在改为依赖 mergedData.length。这个变更与数据源的更改保持一致，确保了当有新消息添加时能够正确触发滚动效果。

---

164-165: 优化滚动位置判断逻辑

使用 findIndex 查找目标项在 mergedData 中的位置，并基于此判断是否滚动到列表末尾。这种方法比之前的实现更加直接和高效。

---

203-209:

❓ Verification inconclusive

使用记忆化组件优化渲染

这里的改动是最核心的优化部分：

1. 直接使用 mergedData 代替之前的 displayData
2. 引入了 MemoBubbleListItem 替代直接渲染 Bubble 组件
3. 通过传递 _key 属性确保引用系统正常工作

这些变更一起减少了不必要的重新渲染，特别是在修改单个消息或添加新消息时，只会导致相关项重新渲染而不是整个列表。

建议考虑添加一个测试用例来验证这个性能优化的效果，可以使用 React 的性能测试工具检测渲染次数的变化。

---

🌐 Web query:

React 组件重渲染性能测试最佳实践

💡 Result:

React组件的重渲染性能测试需要结合工具使用、代码优化和分析策略来系统实施。以下是经过验证的最佳实践：

核心测试工具配置

1. React DevTools性能分析套件
   • 启用Highlight updates功能，通过色块标记组件更新频率(绿色低频/红色高频)[4][7]
   • 使用Profiler录制渲染过程，查看组件树渲染耗时分布[1][2][10]
   • 模拟移动端环境：Chrome DevTools设置CPU 6倍降速[1][2]

// 示例：代码级性能监测
import { Profiler } from 'react';

<Profiler id="ListComponent" onRender={(...args) => console.log(args)}>
  <List items={items} />
</Profiler>

关键性能指标分析

指标	理想阈值	优化触发条件	数据来源
actualDuration	<10ms	>30ms	[10]
baseDuration	稳定值	波动超过20%	[10]
渲染频次	交互时单次	连续黄/红框警告	[4][7]

优化验证策略

1. 组件记忆化验证

   // 正确使用memo的姿势
   const MemoItem = React.memo(ListItem, (prev, next) => {
     return prev.id === next.id && prev.selected === next.selected;
   });

   • 通过Profiler对比memo使用前后的渲染耗时[3][8]
   • 验证props浅层比较是否有效[5][9]

2. 复杂计算缓存

   const processedItems = useMemo(() => {
     return items.map(transformComplexLogic);
   }, [items]); // 依赖项变化时才重新计算[3][9]

常见反模式检测

1. 渲染函数内组件声明

   // 错误示例：每次渲染都创建新组件
   function Parent() {
     const Child = () => <div/>; // 导致Child反复mount
     return <Child />;
   }

   • 通过Profiler检测组件mount次数异常[6]

2. 无效上下文更新

   • 使用Context.Provider时，检查value是否稳定
   • 验证useContext订阅组件是否过度更新[4][8]

长列表专项测试

1. 万级数据压力测试

   // 性能基准测试用例
   test('render 10k items', () => {
     const items = Array(10000).fill().map((_,i) => ({id:i}));
     const { container } = render(<List items={items} />);
     expect(container.querySelectorAll('.item').length).toBe(10000);
   });

   • 虚拟滚动场景下验证可视区域外组件不渲染[3]

通过结合工具分析、代码优化和持续的性能回归测试，可系统性地提升React应用渲染性能。建议在开发流程中集成Lighthouse CI，设定首次内容渲染(FCP)不超过1.5秒的核心指标[1][2][7]。

Citations:

• 1: https://docs.aoabs.com/frontend/React/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96
• 2: https://juejin.cn/post/7207757855033393208
• 3: https://my.oschina.net/u/8624708/blog/16831110
• 4: http://blog.innei.ren/experience-in-performance-optimization-in-react-applications-1?locale=zh
• 5: https://my.oschina.net/emacs_8499980/blog/16532307
• 6: https://www.cnblogs.com/qiaojie/p/16574337.html
• 7: https://juejin.cn/post/6844904196110548999
• 8: https://www.cnblogs.com/longmo666/p/18284604
• 9: https://developer.aliyun.com/article/1410824
• 10: https://blog.csdn.net/owo_ovo/article/details/134770669

---

请确认并补充性能监控用例

目前记忆化组件的改动没有问题，关键优化点如下：

• 使用 mergedData 替换了原来的 displayData
• 引入 MemoBubbleListItem 来替代直接渲染 Bubble 组件
• 通过传递 _key 属性确保引用系统正常工作，进而避免不必要的整列表重新渲染

为进一步验证此次优化的实际效果，建议：

• 添加性能测试用例，例如结合 React DevTools 中的 Profiler 和 Highlight updates 功能，监控组件重新渲染次数和耗时
• 参考 “React 组件重渲染性能测试最佳实践” 中关于使用 Profiler、实际耗时（actualDuration/baseDuration）等指标的说明，对优化数据进行量化验证

请在后续开发中补充此测试用例，并复查该优化在真实使用场景下的表现。

✨ Finishing Touches

• 📝 Generate Docstrings

---

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 generate docstrings to generate docstrings for this 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.

[github-actions]

[codecov]

Bundle Report

Bundle size has no change ✅

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

components/bubble/Bubble.tsx (1)

115-118: 建议：考虑 messageRender 的性能影响

使用 useMemo 缓存 mergedContent 是个好主意，但要注意以下几点：

1. 如果 messageRender 是一个内联函数，每次渲染都会创建新的引用，这样会导致缓存失效
2. 建议将 messageRender 也使用 useCallback 包装，以确保缓存的有效性

示例代码：

+ const memoizedMessageRender = React.useCallback(
+   (content: any) => messageRender(content),
+   [messageRender]
+ );

  const mergedContent = React.useMemo(
-   () => (messageRender ? messageRender(typedContent as any) : typedContent),
+   () => (messageRender ? memoizedMessageRender(typedContent as any) : typedContent),
    [typedContent, messageRender],
  );

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5380eb5 and 3f4e237.

📒 Files selected for processing (1)

• components/bubble/Bubble.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (6)

• GitHub Check: test / react component workflow
• GitHub Check: build preview
• GitHub Check: size
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: test / react component workflow
• GitHub Check: Cloudflare Pages

🔇 Additional comments (1)

components/bubble/Bubble.tsx (1)

109-112: 优化：使用 useMemo 缓存 avatarNode 是个好的改进！

通过 useMemo 缓存 avatarNode 可以避免在 avatar prop 没有变化时的不必要重渲染，这是一个很好的性能优化。依赖数组的设置也很准确。

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.03%. Comparing base (18a95f5) to head (496430b).
Report is 32 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #479      +/-   ##
==========================================
+ Coverage   91.79%   92.03%   +0.23%     
==========================================
  Files          67       66       -1     
  Lines        1463     1444      -19     
  Branches      386      380       -6     
==========================================
- Hits         1343     1329      -14     
+ Misses        120      115       -5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[github-actions]

size-limit report 📦

Path	Size
dist/antdx.min.js	40.28 KB (-38 B 🔽)

[cloudflare-workers-and-pages]

Deploying ant-design-x with    Cloudflare Pages

Latest commit:	496430b
Status:	✅  Deploy successful!
Preview URL:	https://58e2d149.ant-design-x.pages.dev
Branch Preview URL:	https://refactor-bubble-list-rerende.ant-design-x.pages.dev

View logs

[afc163]

需要加个测试用例么？

[YumoImer]

需要加个测试用例么？

感觉有必要，我想下怎么加好些。

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

components/bubble/BubbleList.tsx (3)

Line range hint 108-124: 建议增加空值检查以提高代码健壮性

当前代码在访问 mergedData[mergedData.length - 2] 时可能存在潜在的空值风险。建议添加额外的安全检查。

-const lastItemKey = mergedData[mergedData.length - 2]?.key;
+const secondLastItem = mergedData.length >= 2 ? mergedData[mergedData.length - 2] : null;
+const lastItemKey = secondLastItem?.key;

-const bubbleInst = bubbleRefs.current[lastItemKey!];
+if (!lastItemKey) {
+  return;
+}
+const bubbleInst = bubbleRefs.current[lastItemKey];

---

142-143: 建议添加注释说明滚动逻辑

这段代码负责更新滚动状态，建议添加注释以说明其目的和工作原理。

+// 更新滚动状态：如果滚动到最后一项，则标记为已到达底部
 const index = mergedData.findIndex((dataItem) => dataItem.key === key);
 setScrollReachEnd(index === mergedData.length - 1);

---

Line range hint 181-193: 优化气泡组件的引用管理逻辑

当前的引用管理逻辑可以通过使用回调函数来简化。同时，建议将 typing 属性的处理逻辑提取为一个单独的变量以提高可读性。

 {mergedData.map(({ key, ...bubble }) => {
+  const handleBubbleRef = (node: BubbleRef | null) => {
+    if (node) {
+      bubbleRefs.current[key] = node;
+    } else {
+      delete bubbleRefs.current[key];
+    }
+  };
+  const shouldShowTyping = initialized && bubble.typing;
+
   return (
     <Bubble
       {...bubble}
       key={key}
-      ref={(node) => {
-        if (node) {
-          bubbleRefs.current[key] = node;
-        } else {
-          delete bubbleRefs.current[key];
-        }
-      }}
-      typing={initialized ? bubble.typing : false}
+      ref={handleBubbleRef}
+      typing={shouldShowTyping}
     />
   );
 })}

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3f4e237 and bde6134.

📒 Files selected for processing (2)

• components/bubble/BubbleList.tsx (4 hunks)
• components/bubble/hooks/useDisplayData.ts (0 hunks)

💤 Files with no reviewable changes (1)

• components/bubble/hooks/useDisplayData.ts

⏰ Context from checks skipped due to timeout of 90000ms (6)

• GitHub Check: test / react component workflow
• GitHub Check: build preview
• GitHub Check: size
• GitHub Check: test / react component workflow
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: Cloudflare Pages

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (5)

components/bubble/BubbleList.tsx (3)

39-55: 优化组件引用（ref）的处理方式

当前实现中的引用处理较为复杂，建议进行以下改进：

1. 使用 TypeScript 的类型断言替代强制类型转换
2. 考虑使用 useImperativeHandle 来更优雅地处理引用

 const BubbleListItem: React.ForwardRefRenderFunction<Record<string, BubbleRef>, BubbleProps> = (
   props,
   ref,
 ) => (
   <Bubble
     {...props}
-    ref={(node) => {
-      if (node) {
-        (ref as React.RefObject<Record<string, BubbleRef>>).current[props.id!] = node;
-      } else {
-        delete (ref as React.RefObject<Record<string, BubbleRef>>).current?.[props.id!];
-      }
-    }}
+    ref={(node) => {
+      const refMap = (ref as React.MutableRefObject<Record<string, BubbleRef>>).current;
+      if (node) {
+        refMap[props.id!] = node;
+      } else {
+        delete refMap?.[props.id!];
+      }
+    }}
   />
 );

---

Line range hint 126-142: 增强滚动逻辑的健壮性

当前的滚动逻辑可能在边缘情况下出现问题：

1. 需要添加数组长度检查
2. 建议为关键的魔术数字添加注释说明

-      const lastItemKey = mergedData[mergedData.length - 2]?.key;
+      // 获取倒数第二个项目作为滚动触发点，以确保新消息出现时能平滑滚动
+      const lastItemKey = mergedData.length >= 2 
+        ? mergedData[mergedData.length - 2]?.key 
+        : mergedData[mergedData.length - 1]?.key;
       const bubbleInst = bubbleRefs.current[lastItemKey!];

-      if (bubbleInst) {
+      if (bubbleInst && listRef.current) {

---

160-161: 优化键值查找性能

当前使用 findIndex 进行线性查找可能在大型列表中造成性能问题。建议考虑使用 Map 来优化查找性能。

+          // 使用 Map 存储 key 到 index 的映射
+          const keyIndexMap = new Map(mergedData.map((item, index) => [item.key, index]));
+          const index = keyIndexMap.get(key) ?? -1;
-          const index = mergedData.findIndex((dataItem) => dataItem.key === key);
           setScrollReachEnd(index === mergedData.length - 1);

components/bubble/demo/debug-list.tsx (2)

21-38: 建议改进 ID 生成逻辑

当前的 ID 生成方式可能会在边界情况下产生问题。建议使用更可靠的唯一标识符生成方式。

-    const id = `${firstId !== undefined ? Number(firstId) - 1 : 0}`;
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;

---

58-70: 建议增加错误处理机制

建议在以下场景添加错误处理：

1. deleteBubble 找不到指定 ID 时的处理
2. scrollTo 滚动失败时的错误提示

 function deleteBubble(id: string) {
+  const originalLength = bubbleList.length;
   setBubbleList((preList) => preList.filter((item) => item.id !== id));
+  if (bubbleList.length === originalLength) {
+    message.warning(`未找到 ID 为 ${id} 的消息`);
+    return;
+  }
   message.success(`#${id} message deleted!`);
 }

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bde6134 and 069de64.

📒 Files selected for processing (5)

• components/bubble/BubbleList.tsx (5 hunks)
• components/bubble/demo/debug-list.md (1 hunks)
• components/bubble/demo/debug-list.tsx (1 hunks)
• components/bubble/index.en-US.md (1 hunks)
• components/bubble/index.zh-CN.md (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• components/bubble/demo/debug-list.md

🧰 Additional context used

🪛 GitHub Actions: ✅ test

components/bubble/demo/debug-list.tsx

[error] 75-75: Snapshot test failed - new snapshot needs to be written but CI environment prevents automatic updates

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: Cloudflare Pages

🔇 Additional comments (7)

components/bubble/BubbleList.tsx (1)

199-205: 渲染逻辑优化得当

使用 MemoBubbleListItem 和 mergedData 的直接渲染方式很好地优化了性能。建议为 typing 状态添加更明确的类型定义。

+            // 仅在组件初始化后启用打字动画
             typing={initialized ? bubble.typing : false}

components/bubble/demo/debug-list.tsx (4)

1-6: 代码结构清晰，类型定义恰当！

导入声明和类型定义组织得当，增强了代码的可维护性。

---

10-17: 建议优化初始状态的 typing 属性设置

初始状态中的 typing: true 可能会导致不必要的打字动画效果。如果这不是特意为之，建议移除该属性或设置为 false。

---

71-101: 布局结构合理，性能优化到位！

• 使用 useMemo 优化了选项列表的性能
• 采用 Flex 组件实现了清晰的布局结构

🧰 Tools

🪛 GitHub Actions: ✅ test

[error] 75-75: Snapshot test failed - new snapshot needs to be written but CI environment prevents automatic updates

---

1-107: 需要更新快照测试

CI 环境显示快照测试失败。请在本地运行以下命令更新快照：

🧰 Tools

🪛 GitHub Actions: ✅ test

[error] 75-75: Snapshot test failed - new snapshot needs to be written but CI environment prevents automatic updates

components/bubble/index.zh-CN.md (1)

23-23: 文档更新正确！

新增的调试列表示例位置恰当，有助于开发者理解组件功能。

components/bubble/index.en-US.md (1)

22-22: 文档同步更新完善！

英文文档与中文文档保持同步，新增的调试列表示例有助于国际开发者理解组件功能。

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

components/bubble/BubbleList.tsx (2)

39-60: 新组件实现良好，建议小幅优化类型定义！

组件实现了正确的 ref 转发和内存管理。不过建议将 ref 类型定义得更严格一些。

-  Record<string, BubbleRef>,
+  Record<string | number, BubbleRef>,

这样可以更好地匹配 BubbleDataType['key'] 的类型定义。

---

130-131: 滚动逻辑优化得当，可以考虑进一步提升性能！

滚动逻辑的改动很合理，但是可以通过缓存一些计算来提升性能。

建议使用 useMemo 缓存 lastItemKey 的计算：

-      const lastItemKey = mergedData[mergedData.length - 2]?.key;
+      const lastItemKey = React.useMemo(
+        () => mergedData[mergedData.length - 2]?.key,
+        [mergedData]
+      );

同样地，对于 findIndex 的调用也可以考虑缓存：

-          const index = mergedData.findIndex((dataItem) => dataItem.key === key);
+          const index = React.useMemo(
+            () => mergedData.findIndex((dataItem) => dataItem.key === key),
+            [mergedData, key]
+          );

Also applies to: 146-146, 164-165

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 069de64 and 914a608.

⛔ Files ignored due to path filters (2)

• components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
• components/bubble/__tests__/__snapshots__/demo.test.ts.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

• components/bubble/BubbleList.tsx (5 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (5)

• GitHub Check: test / react component workflow
• GitHub Check: build preview
• GitHub Check: size
• GitHub Check: test / react component workflow
• GitHub Check: Cloudflare Pages

🔇 Additional comments (1)

components/bubble/BubbleList.tsx (1)

203-209: 渲染逻辑优化合理，建议添加测试用例！

渲染逻辑的改动很好地利用了 memo 来优化性能，但是需要添加相应的测试用例来确保功能的正确性。

建议添加以下测试场景：

1. 验证滚动行为
2. 验证气泡渲染顺序
3. 验证 ref 的正确性
4. 验证 memo 优化的效果

我可以帮您生成这些测试用例，您觉得如何？

[YumoImer]

需要加个测试用例么？

为 Bubble.List 组件添加了一个 debug demo ，另外也添加了对重复渲染验证过程的 GIF ～ 再帮 👀 下～

[xuchaoying]

这个问题不继续修了么