删除已安装组件的DOM元素

Question

我正在进行一个将React组件集成到非反应性环境中的项目。

这个项目使用主干，我们正在缓慢迁移网站的某些部分以作出反应。

我的问题是：

删除DOM节点(通过主干/jquery)会释放与React组件关联的内存吗？

这些文档明确规定您必须管理您自己的安装/取消安装，但是我想知道，简单地删除DOM是否会为我清理内存，还是需要担心长期存在的页面中的内存泄漏？

一个示例usecase正在导航(使用我们的主干路由器)并重新呈现页面，这将删除所有以前的节点并构建新的html -那么所有挂载的react组件会发生什么呢？

编辑：

为了明确起见，我不会用jQuery修改呈现的组件。

class App extends React.Component{
   render(){
      return (<div>Amazing</div>);
   }
}



//extreme use case, render a component, remove the DOM node, create a new DOM node
setInterval(function(){
    ReactDOM.render(React.createElement(App),document.getElementById('app'));
    $('#app').remove();
    $('body').append($('<div id="app">'));
},250)

编辑:在调查这个问题后，您必须使用MutationObserver检测已删除的节点并卸载它们，如果没有，节点将继续在内存中呈现。我在这里写了一个完整的描述：

https://medium.com/@patrick.tolosa/backbone-router-with-react-components-13791727a351

Answer 1

如果删除通过直接操作DOM呈现的DOM节点，React将不知道这些更改的。如果Reacts组件被重新呈现，以前删除的DOM节点将重新出现，因为它仍然存在于React虚拟DOM中。

您应该避免操作DOM中已创建的部分。这可能会在应用程序中导致不必要的行为。

例如，删除响应呈现的DOM节点可能会在重新呈现时抛出以下异常：

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

或者其他的DOMException。

下面是正式文件对更新DOM的说明：

React不知道React外部对DOM所做的更改。它根据自己的内部表示来确定更新，如果同一个DOM节点被另一个库操作，那么React就会变得混乱，无法恢复。 这并不意味着与其他影响DOM的方式相结合是不可能的，甚至不一定是困难的，您只需注意每个方法所做的事情。 避免冲突的最简单方法是防止React组件更新。您可以通过呈现没有理由更新的元素来实现这一点，比如空的<div />。

接着给出了一个与jQuery、这里集成的示例。

最后，我建议进一步阅读虚拟DOM。官方文档似乎对此没有太多的说明，但是在网上搜索，您会发现大量的指南，比如这一个。