[需求]大量chat信息，prochat渲染卡顿，有没有更好的改善体验的方法

[Chun]

🧐 问题描述

一次性从服务端获取439条chat信息
点击按钮，打开prochat，渲染该信息列表，发现点击事件需要5到7s才能得到反馈(才能打开)。
而且在渲染之后，我的input输入也会非常卡，因为input是受控的输入更新状态导致prochat又再次被渲染。
我把版本更新到1.12.2，貌似没什么用

      <ProChat
                 loading={loadingHistory}
                 chatRef={proChatRef}
                 chats={chats}
                 className={styles.chatBody}
                 chatItemRenderConfig={{
                       avatarRender: (props) => {
                                return props.originData?.role === "user" ? (
                                    <UserAvatar
                                        avatarProps={{size: 36}}
                                        className={styles.avatar}
                                    />
                        ) : (
                           <Avatar
                                        className={styles.avatar}
                                        src={<Image src={chatIcon} alt="chat"/>}
                                        size={36}
                                    />
                                );
                            },
                            actionsRender: () => (
                                <div style={{minWidth: "4rem", flexShrink: 0}}></div>
                            ), // disabled all chat actions
                            titleRender: () => <></>, // disabled timestamp
                        }}
                 onChatsChange={(chats) => {
                      setChats(
                                chats
                                    .filter((i) => chatMessageFilter(i.content as string))
                                    .map((i) => ({
                                        ...i,
                                        content: trimQuotesAndFormat(i.content as string),
                                    })),
                            );
                   }}
                  renderInputArea={renderInputArea}
                  placeholder="请输入你的问题"
                  request={onProChatRequest}
                />

[Chun]

我现在就是把截子数组的方式，把它的长度降到了20就好多了，是它组件内部自己结构的问题吗

[Shinji-Li]

有一个 shouldUpdate 的参数，可以让你自己控制什么时候需要重新触发渲染，如果返回 false 就是不用重新渲染。

@lichunr 最好不要用受控的方式，想要往里面 push chat 的话，用 ref 去 pushChat 就好