# 前言
上一章我们实战了数据层的开发，这样我们来实现UI组件化, 技术方案选用 Alibaba/rax, 类 React 语法，适用于移动端开发。这章重点会介绍 组件化的设计分层， HOC组件设计，解析器模块设计。
# 源码地址（组件化代码合集）
# 需求交互
针对交互稿我们有如下业务诉求分析：
- 对于一个聊天的UI可以拆分为 普通消息， 自定义（卡片）和系统消息组件。
- 对上面提到的消息展示， 抽象成一个HOC组件，封装不可变的UI，包裹可变组件。
- 封装输入框组件，表情组件。
# 组件化架构框图
对聊天消息组件化能力划分三个层级：基础消息组件，自定义消息组件和业务组件。
- 基础组件(rax-tbms-basemsg)：包括 文本消息、图片消息、系统消息等
- 自定义消息（rax-tbms-custommsg）: 卡片消息， 抽屉消息等。
- 业务组件(rax-tbms-chat-plugin): 表情，输入框，加载组件等
# 消息HOC组件
高阶组件（HOC）是组件开发中的高级技术，用来重用组件逻辑。
具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。表达式如下：
const EnhancedComponent = higherOrderComponent(WrappedComponent);
我们观察交互可以发现，聊天项可以抽象分离出一个HOC高阶组件。
- 不可变区域为：头像和头像标题。
- 可变区域：中间的消息流，根据不同消息展示不同消息UI。
const leftChatItemHOC = (WrappedComponent) => (conversation) => {
const avator = conversation.targetAvator;
// 1. 返回一个装饰过的组件
return class extends PureComponent {
render() {
return (
<View style={style.container}>
<View style={style.containerAvator}>
<Image source={{uri: avator}} resizeMode="cover" style={style.containerAvator} />
</View>
<View style={[style.containerCnt, style.containerLeft]} >
<Text style={style.containerNick}>{conversation.targetNick}</Text>
<View style={style.containerWrappedCard}>
// 2. 返回传入的可变组件, 同时注入组件
<WrappedComponent {...this.props} />
</View>
</View>
</View>
);
}
}
}
@前端进阶之旅: 代码已经复制到剪贴板
代码解释：封装了一个左侧消息展示的高阶函数，用来重用组件逻辑，返回一个传入的可变组件，同时注入属性。
# 使用事例
高阶组件rax-tbms-chat-item 封装了 leftChatItemHOC 和 rightChatItemHOC，分别是左侧对方发送消息高阶组件和右侧自己发送消息高阶组件。
WrappedComponent 为传入的组件， 通过高阶组件返回一个新的组件。 源码地址：
使用事例参考如下:
import { leftChatItemHOC } from 'tbms-ui-chat-item';
import { TextMsg } from 'tbms-ui-chat-basemsg';
// 1. 设置会话基础信息
const conversation = {
avator: 'https://gw.alicdn.com/tfs/TB1aRryvSzqK1RjSZFpXXakSXXa-640-640.png',
targetNick: '伊芙丽旗舰店小徐',
fromNick: 'moliy'
};
// 2. 设置消息格式
c
