Question

对于旧版应用程序，我们将逐步使用React重写Web应用程序的各个部分。因此，无法完全删除文档侦听器的垃圾。页面上有很多不同的组件，它们上都有侦听器。这影响了反应组件的性能。

例如；材质UI切换菜单https://codesandbox.io/s/o9970jm69 在示例中，切换菜单快速且响应您的点击。但是对于我们的Web应用程序来说，由于具有这些文档事件侦听器，因此切换行为与演示不同。

是否可以删除React元素的这些文档单击侦听器？

还是有一种方法可以摆脱这些React组件的监听器？

Answer 1

jQuery事件解决方案＃1

您可以使用unbind删除事件。如果您需要知道事件的名称或类型，可以使用Chrome开发工具查看

解决方案＃2 Javascript事件

另一种方法是捕获事件和stop the propagation。您可以使用removeEventListener或set null the property event。

Answer 2

与其建议您删除监听器，不建议您不要将它们放在首位。

...无法完全删除文档侦听器的垃圾

因为这不是一个选择，所以第二个最好的选择是修改监听器，以便在event.target是react应用程序的一部分时（它们可以通过执行document.getElementById('#your-react-dom-root').contains(event.listener)进行验证）提前退出 >

Answer 3

有关点击事件侦听器的文档很多

您的意思是“页面上有很多不同的组件，上面都有监听器。”

在这种情况下，这里有一些想法可能会有所帮助： Intercept all document link clicks

Answer 4

它必须是一个临时解决方案（在重写结束后将其删除），因为它很脏，但是您可以在mount的React Element上运行jQuery off function。

要使它更易于使用（和删除），您还可以创建一个HOC以在一个地方进行操作，诸如此类：

function withJqueryOffEvent(WrappedComponent, event) {
    return class extends React.Component {
        componentDidMount() {
            $(this.el).off(event);
        }

        render() {
            return <WrappedComponent ref={el => this.el = el} {...this.props} />;
        }
    };
}

// use it like any other HOC
withJqueryOffEvent(AnyComponent, 'click');

在这里，我们只是创建一个接受事件名称的基本HOC，将ref附加到渲染器中的包装组件，并在挂载后在jquery选择器中使用此ref来执行 off

如何删除影响React元素的Jquery文档Click侦听器？

4 个答案: