javascript - React js -[违规] 向滚动阻塞 'mousewheel' 事件添加了非被动事件监听器

Question

我正在使用选择元素和 onChange 事件的一段代码处理 React js。

  handleChange = (event) => {
        this.setState({value: event.target.value});
    }

    render() {
        return (
            <div>         
               <label>
                List
                    <select value={this.state.value} onChange={this.handleChange}>
                        <option value="one">One</option>
                        <option value="two">Two</option>
                    </select>
                </label>
            </div>
        )

但是我在 chrome 中一次又一次地收到这个警告。“[违规] 向滚动阻塞的‘鼠标滚轮’事件添加了非被动事件监听器。考虑将事件处理程序标记为‘被动’以使页面响应更快。”。有没有什么解决办法。

Answer 1

基本上，如果未调用 preventDefault()，所有 scroll 和 touch 事件都应该是“被动的”。但这并不容易..

1. 并非所有浏览器都支持被动事件监听器选项。
2. 如果是第 3 方代码导致警告，则修改其源代码是一种糟糕的做法。
3. 像 default-passive-events 这样的包只是盲目地应用 passive 属性而忽略了 preventDefault() 的使用，这可能会导致你的脚本中断..
4. 对所有事件应用 passive: false 将消除警告，但不会提高性能。那有什么意义呢？

不久前我正在处理这样的问题并创建了一个包来覆盖 EventTarget.prototype.addEventListener 并为所有不 passive 的事件添加选项 preventDefault 以及浏览器是否支持。

https://www.npmjs.com/package/passive-events-support

这不仅消除了警告，还提高了性能。确保只传递必要的事件而不是默认事件。在这种情况下只是“鼠标滚轮”:

import { passiveSupport } from 'passive-events-support/src/utils'

passiveSupport(['mousewheel'])

如果你想要模块化的方式，你可以在文档中找到一个例子。确保在导致该警告的任何其他脚本之前导入此脚本。