Telegram研究:聊天页面数据转换流程
数据转换过程 Postbox.Message
→ MessageHistoryEntry
→ ChatHistoryViewTransitionInsertEntry
+ ChatHistoryViewTransitionUpdateEntry
→ ChatMessageItemImpl
(类似UITableView里的datasource)→ ListViewInsertItem
+ ListViewUpdateItem
→ChatMessageBubbleItemNode
(类似UITableViewCell)
ChatHistoryListNodeImpl.beginChatHistoryTransitions(...)
数据转换为insertItem
preparedChatHistoryViewTransition
→ ChatHistoryViewTransitionUpdateEntry
+ ChatHistoryViewTransitionInsertEntry
→
mappedChatHistoryViewListTransition
→ mappedInsertEntries
→ ChatMessageItemImpl
→ ListViewInsertItem
mappedChatHistoryViewListTransition
→ mappedUpdateEntries
→ ChatMessageItemImpl
→ListViewUpdateItem
enqueueHistoryViewTransition
→ dequeueHistoryViewTransitions()
→ self.transaction
(类似UITableView.reloadData())
ChatMessageItemImpl.nodeConfiguredForParams
→ ChatMessageBubbleItemNode(类似UITableViewCell)
MessageHistoryView.entries → [MessageHistoryEntry] → entry[message:Postbox.Message+isRead+attributes] → Postbox.Message.text 文本内容
二、配置InsertItem及item ChatHistoryListNode.swift
entry转insertEntry: ChatHistoryViewTransitionInsertEntry(index, entry…)
insertEntry转insertItem: → mappedInsertEntries → item = ChatMessageItemImpl(xxxx) → ListViewInsertItem(index: , item: xxx, directionHint: )
每个item都会对应一个Node
ChatMessageItemImpl
→ ChatMessageItem
→ ListViewItem
(类似UITableViewCell的数据和配置部分)
ListMessageItem
ChatBotInfoItem
ChatUserInfoItem
三、配置InsertItem.item对应的Node + 调用asyncLayout ChatMessageItemImpl.nodeConfiguredForParams
→ let node = (viewClassName as! ChatMessageItemView.Type).init(rotated: self.controllerInteraction.chatIsRotated)
ChatMessageBubbleItemNode
: ChatMessageItemView → ListViewItemNode (类似UITableView的UI部分)
viewClassName = ChatMessageAnimatedStickerItemNode.self(视频贴纸1、动图贴纸3、骰子1、动画emoji1)
viewClassName = ChatMessageStickerItemNode.self(大emoji、贴纸)
viewClassName = ChatMessageBubbleItemNode.self (默认、一般视频、多媒体、过期)
nodeConfiguredForParams → node = xxx() + node.asyncLayout()
updateNode→ odeValue.asyncLayout()
四、node更新及布局 ChatMessageBubbleItemNode → asyncLayout → ChatMessageBubbleItemNode.beginLayout(约2000行) → ChatMessageBubbleItemNode.applyLayout(约1400行)
internalUpdateLayout → asyncLayout → ….