famo.us - 如何从渲染树中删除节点？

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是此模式的一个复杂示例）

深入说明：


每个RenderNode都有一个render函数，该函数创建一个renderSpec。
renderSpec包含有关Modifier或Surface的信息。

Modifier规范用于计算最终的CSS属性。
Surface规范耦合到DOM元素。

Engine的每个刻度都使用RenderNode.commit函数渲染renderSpec。
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节点可能会导致性能下降！