如何从渲染树中删除节点?

gad*_*icc 18 famo.us

我觉得我错过了一些明显的东西,但是如何从渲染树中删除节点并正确销毁它们?

看起来我可以做类似的事情mainCtx._node._child.splice(2,1),但这并不适用于所有情况(Scrollviews似乎坚持不懈),并假设API中有相关内容,但我似乎无法找到它.

mar*_*sen 26

您永远不会删除renderNodes - 您使用智能RenderNodes来操纵渲染的内容.

解决方案取决于您想要完成的任务:

1)我想操纵布局

显示/隐藏/交换RenderTree部分的最简单方法是使用a RenderController.您甚至可以指定输入/输出转换

var renderController = new RenderController();
renderController.show( .... );
renderController.hide( .... );
Run Code Online (Sandbox Code Playgroud)

查看官方示例

2)我想管理性能(并删除我不需要的东西)

不要担心删除节点.Famo.us将为您管理此事.

如果要控制渲染节点,请View使用render函数编写自定义.该翻转器类是一个简单的例子(以及RenderController是此模式的一个复杂的例子)

深入解释:

  1. 每个RenderNode都有一个render创建renderSpec的函数.
  2. renderSpec包含有关的信息ModifierSurface.
    • Modifier规范是用来计算最终的CSS属性.
    • Surface规格被耦合到DOM元素.
  3. 每个刻度Engine,renderSpec都使用该RenderNode.commit函数呈现.
  4. commit函数使用ElementAllocator(from Context)来分配/释放DOM元素.(实际上回收DOM节点以节省内存)

因此:刚刚返回正确renderSpec在您的自定义View,并famo.us将管理内存和性能为您服务.

顺便说一句,你不需要使用View类 - 具有render函数的对象就足够了.将View类简单地增加事件和期权这是创建封装,可重用组件的好方法.

更新:现成的解决方案

ShowModifier(gist)一个简单的修饰符,用于显示/隐藏渲染树的各个部分

 var mod = new ShowModifier({visible:true});
 mod.visible = true;
 mod.show();
 mod.hide();
Run Code Online (Sandbox Code Playgroud)

或者,作为替代,使用这个主旨能见度函数添加到ModifierStateModifier

 modifier.visibleFrom(function(){ return true; }) // function, getter object or value
 stateModifier.setVisible(true); // or false
Run Code Online (Sandbox Code Playgroud)

警告:通过操作renderspec来添加/删除DOM节点可能会导致性能下降!