docs/architecture/render/voltron/voltron-render.md
在Hippy3.0中，我们增加了全新的Flutter渲染引擎丰富Hippy的使用生态，我们致力于将Flutter生态与Hippy进行深度的结合，接下来，我们将会对Voltron进行一些原理性的介绍。
从Hippy整体架构中我们可以发现，Hippy3.0中所有的渲染器都基于相同的整体流程
Driver层（这里目前支持Javascript作为驱动）驱动DomManager进行Dom操作（包括创建，更新，移动，删除），Dom操作完成后经过Layout将布局信息汇总，并将所有创建的节点一次性打包发送给RenderManage，最后由不同渲染器的RenderManager进行渲染。
Driver层，这里我们拿Javascript Framework作为例子，目前我们主要支持Vue2，Vue3，React三大框架，不管是你采用哪个上层框架，最终我们都会将DOM操作汇集到SceneBuilder（SceneBuilder是在C++侧注册进V8的处理DOM操作的类）上，其中CreateNode，UpdateNode，MoveNode，DeleteNode负责对DOM进行创建，更新，移动及删除，AddEventListener，RemoveEventListener负责处理事件的绑定和解绑，Build则负责通知一次操作的结束Driver的驱动，C++侧的DOM Manager就可以获得完整的DOM信息，在接收到Build信号后，执行SyncWithRenderManager，通知RenderManager进行批量处理，首先是FlushDomOperations，更新元素的DOM Tree，然后FlushEventOperations，对DOM进行事件绑定解绑，最终DoAndFlushLayout，进行完整的布局计算，将Layout信息赋值给每一个DOM元素，最后，调用EndBatch通知RenderManager结束此次操作，需要注意的是，上述每一步操作都会通过ffi调用到Dart侧，接下来就是Dart侧的相关操作。Dart侧，所以Dart侧也会有一个RenderManager负责下一步操作，在FlushDomOperations结束后，Dart侧会生成一颗RenderNode Tree，FlushEventOperations，DoAndFlushLayout都完成后，RenderNode就具备了足够的渲染条件，此时接收到Build信号，RenderNode就会开始对ViewModel（ViewModel本身是继承自ChangeNotifier，Voltron采用了Provider框架进行状态管理）进行操作，操作结束后，ViewModel调用自身的Update方法，通知元素进行更新，后续完全交给Flutter。DOM操作在Dart侧会生成对应的ViewModel,而ViewModel上存放了所有需要渲染的信息，那么对ViewModel的操作如何触发页面的渲染呢。Flutter是一个声明式的UI框架，遵循UI=F(State)的模式，所以这里我们使用Provider状态管理来对组件进行封装，结合Selector的模式，以及重写ViewModel的相等操作符，这样在ViewModel触发Update操作后，元素自身就会检测变更情况，决定是否要进行Build操作，接下来，我们来看一下针对不同的样式，我们如何来进行处理。Voltron的整个Widget设计是基于层叠结构来做的，首先是最外层的Layout信息，我们交给Positioned组件来进行绝对定位（部分组件不需要绝对定位则可以不包裹这一层），DecoratedBox负责处理圆角，边框，阴影，形状，渐变，背景图像等，ConstrainedBox负责处理宽高，Opacity负责透明度，事件和手势操作我们使用GestureDetector和Listener，形变采用Transform，通过一系列的操作，公共属性都能够得到很好的支持，那么最内部的则是核心Widget，比如图片我们使用ImageWidget,文字我们使用TextWidget，iframe可以使用WebViewWidget等等接入Voltron后，前端需要改动吗？ 答：上层前端框架完全兼容，Hippy-React和Hippy-Vue均可直接在Voltron中运行，Native侧的自定义模块和事件等经过封装后也可直接在Voltron中调用。
接入Voltron后，Flutter组件可以使用吗？ 答：完全可以，可以参考Voltron 自定义组件对Flutter生态中的组件进行自定义的扩展。
其他特性介绍