WorkInProgress

可视化协议转换 ReactElement 的基础库，并应用于任何基于 react-reconciler 实现的渲染器。

Class

WorkInProgress 构造函数接收一个组件Map，key为协议定义的名，value为组件。

new WorkInProgress({
  'view': View
});

WorkInProgress 实例方法：

• transformIntoReactElement，接收 CoMallElement，返回 ReactElement
• transformIntoCoMallElement 接收 ReactElement Tree，返回 CoMallElement
• registerComponent 注册一个组件，参数为key，component

警告：Tree 层级被限制为三层，超过三层的 CoMallElement将会被忽略

WorkInProgress 使用案例可访问：WorkInProgress

Function

• createCoMallElement 函数，创建并返回一个 CoMallElement。

createCoMallElement(
  type,
  [props],
  [...children]
)

创建并返回指定类型的新的 CoMallElement，其中type参数类型必须为字符串。

• cloneCoMallElement 函数，以 CoMallElement 元素为样板克隆并返回新的 CoMallElement 元素。

cloneCoMallElement(
  element,
  [props],
  [...children]
)

返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果，新的子元素将取代现有的子元素。

• createSnapshot 函数，传入一个 CoMallElement 元素，并返回一个 JSX 格式的快照，如 <CoMallElement><CoMallElement/>。

createSnapshot(
  element
)

• isValidCoMallElement 验证对象是否为 CoMall 元素，返回值为 true 或 false。

isValidCoMallElement(object)

Children

Children 提供了处理 props.children 不透明数据结构的实用方法。

• Children.map 在 children 里的每一个节点上调用一个函数。

!!!警告：由于转换规则三层的限制，从根元素开始计算 child 需要应用在三层以内

const maps = Children.map(treeMock.props.children, (child) => {
  return (
    <View>
      <View>{child}</View>
    </View>
  );
});

• Children.count 返回 children 中的组件数量
• Children.only 验证 children 是否只有一个子节点

Distribute

数据分发容器，详细可访问：Distribute

技术分析

• 对绘制界面协议的思考
• 动态绘制界面时数据分发的容器
• WorkInProgress 使用案例
• CoMallElement