在页面较多markdown代码渲染或者对话轮次增加的情况下，Sender输入文字会变得非常卡顿，比较影响用户体验

[chiefleo]

经过ChatGPT定位，代码可能有如下问题，辛苦官方大大们后续迭代时考虑优化一下，谢谢~

1. 过度渲染：ChatInputArea组件在内容变化时可能导致整个消息列表重新渲染。

2. 大量状态更新：每次输入都会触发setContent，然后重新渲染组件树。

3. Markdown渲染性能：大量Markdown内容的实时渲染可能造成性能瓶颈。

4. 虚拟列表缺失：消息列表没有使用虚拟化技术，所有消息都在DOM中。

[kimteayon]

你说的是Sender组件还是bubble组件，如果是因为消息太多导致Sender 组件卡顿 也许是因为实现方式问题 导致父组件库在重复渲染

[kimteayon]

是否可以提供一个完整环境和示例

[KellaTe]

经过ChatGPT定位，代码可能有如下问题，辛苦官方大大们后续迭代时考虑优化一下，谢谢~

1. 过度渲染：ChatInputArea组件在内容变化时可能导致整个消息列表重新渲染。
2. 大量状态更新：每次输入都会触发setContent，然后重新渲染组件树。
3. Markdown渲染性能：大量Markdown内容的实时渲染可能造成性能瓶颈。
4. 虚拟列表缺失：消息列表没有使用虚拟化技术，所有消息都在DOM中。

如果组件组件列表和输入框在同一个地下的话是会这样的，（： 我刚开始也遇到过，这里将输入框，列表组件都做提取，并且使用memo先优化一下。我看了一下 List 的实现，还没有 Virtualized 的实现。也可以自己使用 react-window 来实现一个。