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 → ….