jquery - 当 React 附加到的元素在 React 之外被删除时，有没有办法通知 React 组件

问题描述

我们的应用程序包含大量使用 jQuery 和一些较新的 React 组件编写的遗留代码。我们大多能够处理两者之间的分离问题，我们的大部分代码都是其中之一 - 但偶尔我们在 JQuery 组件中使用 React 组件。

在大多数情况下：JQuery 创建一个 Div，将 Div 元素传递给 ReactDOM.render 并且该 div 的控制由反应控制。然后在 JQuery 销毁 Div 之前，它会调用 ReactDOM.unmountComponentAtNode 进行拆除。

然而，我们有一些 JQuery 代码正在以一种不容易检测到其中一些实际上是 React 的方式被删除，从而造成组件内存泄漏。

对我们来说正确的解决方案是解决拆除问题，以便始终正确调用 unMounts，但是这存在工程风险，因为遗留代码不是最干净的，并且引入新错误的风险很高。

我的问题是 React Components 是否有一种方法可以发现它们已经成为孤儿。ComponentWillUnmount 不是答案（因为在这种情况下它不会被调用）。

标签： jqueryreactjs

您可以在组件的父级上使用突变观察器，但如果真的有必要，我会感到惊讶。

基本上，你会：

ref在您的组件返回的顶级元素上使用render.
在componentDidMount中，使用currentfrom ref 找到parentNode并在其上设置一个变异观察者，观察childList变化。
在观察者回调中，查找已删除节点列表中ref节点所在的突变记录。current
- 如果是这样，请进行任何您必须做的清理工作。

现场示例：

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.ref = React.createRef(null);
        this.cleanedUp = false;
    }
    
    componentDidMount() {
        this.cleanedUp = false;
        // assert(this.ref.current !== null);
        if (this.observer) {
            this.observer.disconnect();
        }
        this.observer = new MutationObserver(records => {
            if (this.cleanedUp) {
                return;
            }
            for (const record of records) {
                for (const node of record.removedNodes) {
                    if (node === this.ref.current) {
                        this.cleanup();
                        return;
                    }
                }
            }
        });
        this.observer.observe(this.ref.current.parentElement, {
            childList: true,
            subtree: true
        });
    }
    
    componentWillUnmount() {
        this.cleanup();
    }

    cleanup() {
        console.log("Clean up here");
        this.observer.disconnect();
        this.observer = null;
        this.cleanedUp = true;
    }
    
    render() {
        return <div ref={this.ref}>This is the component's top level element</div>;
    }
}

const root = document.getElementById("root");
ReactDOM.render(<Example/>, root);

// Outside React...
setTimeout(() => {
    root.innerHTML = ""; // Bludgeon its contents
}, 1000);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

您可能需要从文档树的更上方观察，而不仅仅是组件的直接父级，但这是一般的想法......

注意：我上面使用for-of的依赖于浏览器的可迭代性。现代浏览器可以，但稍旧的浏览器可能不会。我在这里的回答是关于如何使它们可迭代（假设迭代协议受浏览器的 JavaScript 引擎支持），或者您可以使用（也在那里讨论）。removedNodesNodeListforEach

jquery - 当 React 附加到的元素在 React 之外被删除时，有没有办法通知 React 组件

问题描述

解决方案

推荐阅读