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

Question

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

看起来我可以做mainCtx._node._child.splice(2,1)这样的事情，但这并不适用于所有情况（Scrollviews似乎坚持不懈），并假设在API中有相关的东西但是我似乎无法找到它。

Answer 1

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

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

1）我想操纵布局

显示/隐藏/交换RenderTree部分的最简单方法是使用RenderController。您甚至可以指定进/出过渡

var renderController = new RenderController();
renderController.show( .... );
renderController.hide( .... );

请参阅official example

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

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

如果要控制渲染节点，请使用View函数编写自定义render。 Flipper class是一个简单的例子（RenderController是这种模式的复杂例子）

深入解释：

1. 每个RenderNode都有一个render函数，用于创建 renderSpec 。
2. renderSpec 包含有关Modifier或Surface的信息。
   • Modifier规范用于计算最终的CSS属性。
   • Surface规范与DOM元素相关联。
3. 使用Engine函数呈现RenderNode.commit， renderSpec 的每个刻度。
4. commit函数使用ElementAllocator（来自Context）来分配/释放DOM元素。 （实际上回收DOM节点以节省内存）

因此：只需在自定义View中返回正确的 renderSpec ，famo.us就会为您管理内存和性能。

顺便说一下，您不需要使用View类 - 具有render功能的对象就足够了。 View类只是添加事件和选项，这是创建封装的，可重用的组件的好方法。

更新：现成的解决方案

ShowModifier (gist) 显示/隐藏渲染树部分的简单修饰符

 var mod = new ShowModifier({visible:true});
 mod.visible = true;
 mod.show();
 mod.hide();

或作为替代方案，使用 this gist 将可见性功能添加到Modifier和StateModifier

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

警告：通过操纵renderspec来添加/删除DOM节点可能会导致性能下降！