javascript - 如何避免 jQuery 的内存泄漏？

Question

jQuery 在其内部缓存中保存对 DOM 节点的引用，直到我显式调用 $.remove()。如果我使用 React 等框架自行删除 DOM 节点(使用 native DOM 元素 API)，我该如何清理 jQuery 的 mem 缓存？

我正在使用 React 设计一个相当大的应用程序。对于那些不熟悉的人，React 会根据自己的“影子”DOM 表示，根据需要拆除 DOM 并重建。该部件运行良好，没有内存泄漏。

一闪而过，我们决定使用 jQuery 插件。在 React 运行其渲染循环并构建 DOM 之后，我们初始化插件，这会导致 jQuery 保存对相应 DOM 节点的引用。稍后，用户更改页面上的选项卡，React 删除这些 DOM 元素。不幸的是，因为 React 不使用 jQuery 的 $.remove() 方法，jQuery 维护对这些 DOM 元素的引用，垃圾收集器永远不会清除它们。

有没有办法告诉 jQuery 刷新它的缓存，或者更好的是，根本不缓存？我希望仍然能够利用 jQuery 的插件和跨浏览器的优点。

Answer 1

如果您的插件公开了一种以编程方式销毁其实例之一的方法(即 $(element).plugin('destroy') )，您应该在 componentWillUnmount 中调用该方法。组件的生命周期。

componentWillUnmount 在您的组件从 DOM 中卸载之前被调用，它是清理您的组件在其生命周期中可能创建的所有外部引用/事件监听器/dom 元素的正确位置。

var MyComponent = React.createClass({
    componentDidMount() {
        $(React.findDOMNode(this.refs.jqueryPluginContainer)).plugin();
    },
    componentWillUnmount() {
        $(React.findDOMNode(this.refs.jqueryPluginContainer)).plugin('destroy');
    },
    render() {
        return <div ref="jqueryPluginContainer" />;
    },
});

如果您的插件没有公开自己的清理方法， this article列出了几种方法，您可以尝试取消引用一个经过深思熟虑的插件。

但是，如果您是 正在创建 在你的 React 组件中使用 jQuery 的 DOM 元素，那么你做错了:你几乎应该 从不 使用 React 时需要 jQuery，因为它已经抽象出使用 DOM 的所有痛点。

我也会对使用 refs 持谨慎态度。真正需要引用的用例很少，而且通常涉及与操作/读取 DOM 的第三方库的集成。

如果您的组件有条件地呈现受 jQuery 插件影响的元素，您可以使用回调引用来监听其挂载/卸载事件。

之前的代码会变成:

var MyComponent = React.createClass({
    handlePluginContainerLifecycle(component) {
        if (component) {
            // plugin container mounted
            this.pluginContainerNode = React.findDOMNode(component);
            $(this.pluginContainerNode).plugin();
        } else {
            // plugin container unmounted
            $(this.pluginContainerNode).plugin('destroy');
        }
    },
    render() {
        return (
            <div>
                {Math.random() > 0.5 &&
                    // conditionally render the element
                    <div ref={this.handlePluginContainerLifecycle} />
                }
            </div>
        );
    },
});