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

Question

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

大多数情况下:JQuery 创建一个 Div，Div 元素被传递到 ReactDOM.render，并且该 div 的控制由 React 控制。然后在 JQuery 销毁 Div 之前，它会调用 ReactDOM.unmountComponentAtNode 来进行拆卸。

但是，我们有一些 JQuery 代码被删除，这种方式很难检测到其中一些代码实际上是 React，从而造成组件内存泄漏。

正确的修复方法是解决拆卸问题，以便始终正确调用 unMount，但是这存在工程风险，因为遗留代码不是最干净的，并且引入新错误的风险很高。

我的问题是，React 组件是否可以通过某种方式发现它们已成为孤儿。 ComponentWillUnmount 不是答案(因为在这种情况下它不会被调用)。

Answer 1

您可以使用mutation observer在组件的父级上，但如果确实有必要，我会感到惊讶。

基本上，你会:

• 使用 ref在 render 中组件返回的顶级元素上。
• 在 componentDidMount ，使用 ref 中的 current 查找 parentNode 并在其上设置突变观察器，监视 childList 更改。
• 在观察者回调中，查找 mutation record其中 ref 的当前节点在已删除节点列表中。
  • 如果是这样，请进行必要的清理工作。

实例:

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>

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

<小时/>

注意:像我上面那样在 removedNodes 上使用 for-of 依赖于浏览器使 NodeList 可迭代。现代浏览器可以，但稍旧的浏览器可能不会。 My answer here讨论如何使它们可迭代(假设浏览器的 JavaScript 引擎支持迭代协议(protocol))，或者您可以使用 forEach 代替(也在那里讨论)。