javascript - 删除已安装组件的 DOM 元素

Question

我正在从事一个将 React Component 整合到非 React 环境中的项目。

该项目使用 Backbone，我们正在慢慢将网站的某些部分迁移到 React。

我的问题:
删除 DOM 节点(通过 backbone/jquery)是否会释放与 React 组件关联的内存？
文档明确指出您必须管理自己的安装/卸载，但是我想知道是否简单地删除 DOM 会为我清理内存，或者我是否需要担心长期页面中的内存泄漏？

一个示例用例是导航离开(使用我们的主干路由器)并重新呈现页面，这会删除所有以前的节点并构建新的 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 来移除 React 渲染的 DOM 节点，React 将不知道这些变化。如果随后重新渲染 React 组件，之前删除的 DOM 节点将重新出现，因为它仍然存在于 Reacts 虚拟 DOM 中。

您应该避免操纵 React 创建的 DOM 部分。这可能会导致您的应用程序出现意外行为。

例如，删除 React 渲染的 DOM 节点可能会在重新渲染时抛出以下异常:

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

或其他一些DOMException。

---

这是 official documentation 的内容说到更新 DOM:

React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.

This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each are doing.

The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty <div />.

接下来是 React 与 jQuery 集成的示例，here .

最后，我建议进一步阅读Virtual DOM。官方文档好像没有说太多，但是上网搜索一下，你会发现一大堆指南；喜欢this one .