React警告滚动阻塞“touchstart”的非被动事件侦听器

Question

我有一个带有 Material-ui Slider 的 React 组件。每次渲染此组件时，我都会收到此警告：“向滚动阻止‘touchstart’事件添加了非被动事件侦听器。考虑将事件处理程序标记为‘被动’以使页面响应更快”

如何解决这个问题？

Answer 1

许多库和框架默认添加非被动事件侦听器。你对此无能为力。我建议使用高度灵活且可配置的被动事件支持，而不是等待支持包来调试并使事件侦听器被动，而不是等待支持，而无需接触第 3 方源代码。

\n

首先，安装包后调试触摸和滚轮事件侦听器及其参数：

\n

import { passiveSupport } from \'passive-events-support/src/utils\'\npassiveSupport({ debug: true })\n

\n

这应该控制台记录所有事件侦听器

\n

[Passive Events Support] Non-passive Event Listener\n  element: div.some-element\n  event: \'touchstart\'\n  handler:\n    fn: \xc6\x92 (e)\n    fnArgument: \'e\'\n    fnContent: \'console.log(e)\'\n    fnPrevented: false\n  arguments: false\n

\n

注意arguments参数，如果是false，undefined或者内部没有参数的对象passive，此事件会导致浏览器抛出警告并影响滚动性能。

\n

要修复它，只需使用包和记录的信息来使这个确切的事件侦听器成为被动的：

\n

import { passiveSupport } from \'passive-events-support/src/utils\'\npassiveSupport({\n  debug: false,\n  // add this one\n  listeners: [\n    {\n      element: \'div.some-element\',\n      event: \'touchstart\'\n    }\n  ]\n})\n

\n

请注意，调用的事件侦听器preventDefault()不应标记为被动，但要修复警告，仍应具有passive值为 的参数false。

\n

默认情况下，包将检查处理程序本身是否阻止了事件侦听器，但如果处理程序内部调用的方法阻止了事件侦听器，则包将失去对它的跟踪。要强制分配，passive: false只需将prevented: true参数传递给listeners项目：

\n

passiveSupport({\n  //...\n  listeners: [\n    {\n      element: \'div.some-element\',\n      event: \'touchstart\',\n      prevented: true\n    }\n  ]\n})\n

\n

对我来说，这个包修复了由 Materialize 和 jquery 引起的所有警告。希望它也能帮助你。

\n

Answer 2

React 不支持被动事件监听器。你所要做的就是获取真实 dom 的 ref 并使用 {passive:true} 作为选项附加事件监听器。并且不要忘记在销毁组件之前分离事件监听器（实际上是在 componentWillUnmount 中）。