「动态」Ex.xuiContainer

1.基本介绍

执行 xuiContainer 专用容器控件渲染，该函数主要用于渲染容器基础配置，该函数支持两种渲染模式：

1. 无容器模式：container无配置，为空。
2. 有容器模式：container中有内容，带容器渲染。

2.参数说明

1. container：容器配置信息，对应后端的containerConfig配置对象。
2. UI：配置专用组件import UI from 'oi';，专用于配置的核心组件定义（Ox组件）。
3. inherit：继承属性集，构造继承属性，连接原生yoAmbient构造的属性集。
4. fnJsx：「Jsx渲染函数」组件专用Jsx渲染函数，容器函数会笼罩在fnJsx外围。

3.追加属性

除开Ex.yoAmbient函数构造的属性集以外，当前函数会追加特定属性信息

3.1.$metadata结构

{
    key: "组件key",
    type: "组件名称，系统会根据该名称读取容器组件",
    page: "当前配置中的pageId，页面ID",
    componentType: "当前容器类型"
}

3.2.$controls加锁

$controls变量会在读取完成后执行加锁Object.freeze操作，一旦加锁后，该配置信息不可被更改（只读）。

3.3.递归渲染

在container + component结构中，还允许component定义自我容器，如果出现自我容器，则容器会构造两层，如：

<Container>
    <SelfContainer>
        <Component/>
    </SelfContainer>
</Container>

• Container：外层容器配置的基础信息containerConfig。
• SelfContainer：内层容器配置的基础信息。
• Component：组件本身以及组件基础配置。
• SelfContainer + Component等价于xuiControl的内容。

「动态」Ex.xuiDecorator

1.基本介绍

执行 xuiDecorator 修饰包装组件。

1. 提取 control 中的配置信息
2. 是否执行了 $switcher 的随机跳跃处理（刷新界面专用）
3. 事件执行器，针对特殊节点：decorator 执行事件注入解析工作

2.xuiControl解析流程

根据传入的配置信息，构造组件配置。

2.1.基础流程：

• 如果isContainer = true，证明当前组件带容器配置，先渲染容器，再渲染组件。
• 如果提取了control.name，从UI中构造的组件，则执行组件渲染。
• 如果内置包含了control.container，则构造内置容器。

2.2.继承属性：

「动态」Ex.xuiGrid

1.基本介绍

执行 xuiGrid 专用Grid控件布局，执行每个单元格的渲染操作，Grid执行行列渲染。每个单元格内部：

1. xuiCell：执行单元格内容渲染。
2. xuiColumn：执行单元格属性渲染<Col/>元素。

2.xuiCell

xuiCell用于构造fnJsx函数，内置会递归执行：

1. xuiGrid：rows配置。
2. xuiDecorator：control配置。

3.最终骨架

最终骨架代码：

3.1.容器部分

<Container>
    <SelfContainer>
        <Component/>
    </SelfContainer>
</Container>

3.2.网格部分

上边骨架中的<Component/>部分

<Row>
    <Col>
         {xuiGrid}
         {xuiDecorator}
    </Col>
</Row>