Open lichunr opened 4 months ago
一次性从服务端获取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} />
我现在就是把截子数组的方式,把它的长度降到了20就好多了,是它组件内部自己结构的问题吗
有一个 shouldUpdate 的参数,可以让你自己控制什么时候需要重新触发渲染,如果返回 false 就是不用重新渲染。
@lichunr 最好不要用受控的方式,想要往里面 push chat 的话,用 ref 去 pushChat 就好
🧐 问题描述
一次性从服务端获取439条chat信息 点击按钮,打开prochat,渲染该信息列表,发现点击事件需要5到7s才能得到反馈(才能打开)。 而且在渲染之后,我的input输入也会非常卡,因为input是受控的输入更新状态导致prochat又再次被渲染。 我把版本更新到1.12.2,貌似没什么用