bubbleList roles里面的messageRender会重复渲染。

[lionY-p]

重现步骤

在线示例链接：（必填）

步骤：
1.
2.
3.

当前行为

渲染完了之后会卸载再按照全量内容重新渲染

预期行为

No response

上下文

No response

版本

1.3

您在哪些浏览器上遇到了这个问题？

Chrome

[dosubot]

Hi @lionY-p! I'm Dosu and I’m helping the x team.

这是已知的 React 渲染行为，不是组件本身的 bug。只要你传给 Bubble.List 的 roles、items 或 messageRender 是每次 render 都新生成的对象或函数（比如 inline 定义、每次都 new 一个 function），React.memo 就会认为 props 变了，导致所有消息卸载再重渲染（即使 key 没变）参考。

最佳实践是：用 useMemo/useCallback 包裹 roles、items、messageRender，确保它们引用稳定，避免每次 render 都新建对象/函数。例如：

const roles = useMemo(() => ({
  ai: { messageRender: myRenderFn, ... },
  // ...
}), [myRenderFn]);

const memoizedMessageRender = useCallback((content) => {
  // ...
}, []);

如果 messageRender 返回的是自定义组件，也可以用 React.memo 包一层，进一步减少不必要的渲染。

如果你的输入框和消息列表在同一个组件里，建议把输入框和消息列表拆成独立的 memo 组件，避免输入内容变化导致整个列表重渲染参考。

总之，避免 inline 定义和每次 render 都新建对象/函数，保证 props 引用稳定，就能解决这个重复渲染问题。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[lionY-p]

Hi @lionY-p! I'm Dosu and I’m helping the x team.

这是已知的 React 渲染行为，不是组件本身的 bug。只要你传给 Bubble.List 的 roles、items 或 messageRender 是每次 render 都新生成的对象或函数（比如 inline 定义、每次都 new 一个 function），React.memo 就会认为 props 变了，导致所有消息卸载再重渲染（即使 key 没变）参考。

最佳实践是：用 useMemo/useCallback 包裹 roles、items、messageRender，确保它们引用稳定，避免每次 render 都新建对象/函数。例如：

const roles = useMemo(() => ({
ai: { messageRender: myRenderFn, ... },
// ...
}), [myRenderFn]);

const memoizedMessageRender = useCallback((content) => {
// ...
}, []);
如果 messageRender 返回的是自定义组件，也可以用 React.memo 包一层，进一步减少不必要的渲染。

如果你的输入框和消息列表在同一个组件里，建议把输入框和消息列表拆成独立的 memo 组件，避免输入内容变化导致整个列表重渲染参考。

总之，避免 inline 定义和每次 render 都新建对象/函数，保证 props 引用稳定，就能解决这个重复渲染问题。

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other    

你好，感谢回复。 我发现问题了，我是加了footer会出现这个问题，我看你们源码 有footer和header 是直接替换处理的

[dosubot]

你说得对，Bubble.List 的 footer 和 header 在源码里确实是直接替换渲染的，没有做内部 memo 或引用稳定处理。如果父组件每次 render 都传递新的 footer/header（比如内联函数或新 ReactNode），React 会把它们当成新节点，导致整个列表内容卸载再重建，出现你说的全量重渲染现象。这不是 bug，而是 React 的标准行为参考。

最佳实践是：用 useMemo/useCallback 包裹 footer、header（和 roles、items、messageRender），保证它们引用稳定，避免每次 render 都新建对象或函数。例如：

const memoizedFooter = useCallback((message, info) => {
  // ...footer 渲染逻辑
}, []);

<Bubble.List
  footer={memoizedFooter}
  // 其它 props 也建议都 memo
/>

只要 props 引用稳定，React.memo 才能生效，避免 Bubble.List 频繁卸载重渲染。如果已经做了 memo 但还是有问题，可以检查 footer/header 的 key 是否变化，或者自定义 React.memo 的比较函数。更多细节可以参考 相关 issue。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[lionY-p]

你说得对，Bubble.List 的 footer 和 header 在源码里确实是直接替换渲染的，没有做内部 memo 或引用稳定处理。如果父组件每次 render 都传递新的 footer/header（比如内联函数或新 ReactNode），React 会把它们当成新节点，导致整个列表内容卸载再重建，出现你说的全量重渲染现象。这不是 bug，而是 React 的标准行为参考。

最佳实践是：用 useMemo/useCallback 包裹 footer、header（和 roles、items、messageRender），保证它们引用稳定，避免每次 render 都新建对象或函数。例如：

const memoizedFooter = useCallback((message, info) => {
// ...footer 渲染逻辑
}, []);

<Bubble.List
footer={memoizedFooter}
// 其它 props 也建议都 memo
/>
只要 props 引用稳定，React.memo 才能生效，避免 Bubble.List 频繁卸载重渲染。如果已经做了 memo 但还是有问题，可以检查 footer/header 的 key 是否变化，或者自定义 React.memo 的比较函数。更多细节可以参考 相关 issue。

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other    

感谢，问题已经解决了 我之前footer是通过&&处理的 导致前面输出的内容和最后的内容渲染逻辑不是一致的，导致了重新渲染。现在我通过三元的形式，保证不需要footer的也有空div。所有渲染都走的你们有footer、header的逻辑

[lionY-p]

你好，我觉得你们bubble里面的渲染逻辑，不需要加header和footer的判断，直接用个变量去记录contentnode的内容 渲染都走footer||header判断里面的逻辑，保证了footer和header不会去影响主内容