React: パッシブイベントリスナーのサポート

これはChrome51に導入されました。Reactでこれをサポートするための更新された計画はありますか？ ：O

Reactのドキュメントにイベントリスナーが1つしかなく、他のリスナーに委任する場合、これはどのように可能ですか？
@sebmarkbage

パッシブイベントの問題の現在のステータスは何ですか？

ホイールイベントの処理についてChromeで警告が表示されました。これは、パッシブイベントハンドラーとして登録されている場合に最適化できます。 だから、これをReactに入れるのはいいことだろう！

また、Firefoxに毎晩すでに着陸しているonceなどの任意のオプションを処理することもできます： https ： https ：

FWIW、Facebookはアクティブなホイールイベントをリッスンして、サイドバーまたはチャットウィンドウがスクロールされたときに外側のスクロールをブロックします。 それなしではUIを実装できません。 これをオプションとしてサポートしたいのですが、問題領域はまだ不完全であるため、パッシブイベントリスナーを含まないこの問題の代替ソリューションが進化する可能性があります。 ですから、それはまだアクティブなデザインスペースです。

両方のアクティブリスナーを維持し、パッシブリスナーのサポートを追加することが重要です。
デスクトップアプリケーションでは違いは見られませんが、モバイルアプリではパッシブスクロールリスナーによって速度が大幅に向上します。

少しの提案：

<SomeElement
  onScroll={this.onScrollThatCallsPreventDefault}
  onScrollPassive={this.onScrollThatJustListens}
  ...this.props
/>

@romulofええ、これはキャプチャフェーズでもイベントを登録する方法です

<SomeElement
  onClick={this.onClick}
  onClickCapture={this.onClickCapture}
  onScrollPassive={this.onScrollPassive}
/>

したがって、これはパッシブイベントもサポートするための適切なAPIになると思います。

補足：トリッキーな質問は、キャプチャフェーズのパッシブイベントをどのように登録するかです。 パッシブイベントの性質上、これは不可能だと思います。 彼らはevent.preventDefault()を呼び出すことさえ許可されていないので、おそらくこれは問題ではありません。

@radubrehar 、 onScrollCapturePassiveは、キャメルケースに入った聖書全体のように見えます。

:)キャプチャフェーズにはパッシブイベントがないため、そうではありません。

確かにそれは意味がありませんが、私はそれを当てにしません。 onceなど、他のタイプのイベントバインディングもあります。

別の提案：

<SomeElement
  onScroll={this.onScrollThatCallsPreventDefault}
/>
<SomePassiveElement
  onScroll={{
    passive: true,
    capture: true,
    handler: this.onScrollThatJustListens,
  }}
/>

このように、Reactは、イベントハンドラーが関数（通常のバインディング）であるか、バインディングオプションとハンドラー関数を含むオブジェクトであるかを検出する必要があります。

オプションを使用したオブジェクトアプローチは、必要になる可能性のある他のオプションがあるため、 onFooPassiveよりも理にかなっていると思います。 イベントはデフォルトでパッシブである必要があるという@sebmarkbageの提案と組み合わせると、これはおそらくそれほど面倒ではないでしょう。

頭に浮かぶもう1つのアプローチは、プロパティをイベントハンドラーにアタッチして、パッシブモードをオプトアウトできるようにする（または他のオプションを切り替える）ことです。 このようなもの：

class Foo extends React.Component {
  constructor() {
    this.handleScroll = this.handleScroll.bind(this);
    this.handleScroll.passive = false;
  }

  handleScroll() {
    ...
  }

  render() {
    return <div onScroll={this.handleScroll} />;
  }
}

理論的には、デコレータが着地すると、これはデコレータで非常にうまく機能します。

これについてもう少し考えてみると、個々のオプションではなく、イベントオプションプロパティを関数に追加する方がよいと思います。 これにより、Reactは、潜在的に多くのプロパティではなく、1つのプロパティについてのみ心配する必要があります。 したがって、上記の例を調整するには、次のようにします。

class Foo extends React.Component {
  constructor() {
    this.handleScroll = this.handleScroll.bind(this);
    this.handleScroll.options = { passive: false };
  }

  handleScroll() {
    ...
  }

  render() {
    return <div onScroll={this.handleScroll} />;
  }
}

私が思いついたもう1つの考えは、これらのオプションがJSXを介して渡されるように、 JSX構文を

return <div onScroll={this.handleScroll, { passive: false }} />;

私はまた、イベントがデフォルトでパッシブであるべきかどうかについても考えていました、そして私は少しフェンスにいます。 一方では、これはスクロールハンドラーのようなイベントには確かに便利ですが、多くのクリックハンドラーで乱気流が発生し、予期しない動作が発生するのではないかと心配しています。 デフォルトでパッシブなイベントとそうでないイベントがあるようにすることもできますが、それはおそらく人々を混乱させるだけなので、おそらく良い考えではありません。

この方法は、JSX構文を変更することなく、以前に提案した方法と非常によく似ています。

return <div onScroll={{ handler: this.handleScroll, passive: true }} />;

そして、ドキュメントは簡単です：

div.propTypes = {
  ...
  onScroll: React.PropTypes.oneOf([
    React.PropTypes.func,
    React.PropTypes.shape({
      handler: React.PropTypes.func.isRequired,
      capture: React.PropTypes.bool,
      passive: React.PropTypes.bool,
      once: React.PropTypes.bool,
    }),
};

反応イベントはデフォルトでパッシブですか？ 少なくともタッチイベントではそうです。 バニラドキュメントレベルのイベントリスナーにフォールバックしない限り、 preventDefault実行することはできません。

@joshjg Reactハンドラーには、ネイティブイベントに似ていますが、異なる「合成イベント」が渡されます。 ちなみに、私は実際にこれを行うコードを読んでいないので、より多くの知識を持っている人が私が言おうとしていることを訂正する必要があります。

私は実装の詳細にあまり精通していませんが、 preventDefaultは、少なくとも_防止しているハンドラーがReactイベントハンドラーでもある限り_機能することを知っています。 とにかく、それは私の経験です。

stopPropagationを使用すると、運が悪くなる可能性が高くなります（たとえば、Reactにバインドできないdocumentクリックリスナーがあり、内部をクリックした場合にバブリングを回避したい場合など）特定の要素）。 その場合、次を使用できます。

function stopPropagation (e) {
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation();
}

[[MDN]（https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation）]

これはメイントピックから少し外れましたが、簡単に言えば、Reactはパッシブイベントを使用せず、奇妙な順序で処理されることがあります。

@joshjg @ benwiley4000 @gaearon最近、

https://www.chromestatus.com/features/5093566007214080を参照して

これにより、Reactの動作方法が間接的に変更されました-イベントをアタッチするときにReactがpassive: falseについて明示的に言及していないと思います-したがって、動作が変更されました。

私もこれをヒットしました-したがって、addEventListenerを使用してタッチイベントを手動で登録する必要があります

FYI Edge 16は、パッシブイベントリスナーを出荷します。 それはまだそれらをサポートしていない主要なブラウザの

クロームパッシブ・バイ・デフォルト介入のみに適用されることに注意touchstartとtouchmoveではない、 wheel 。 したがって、明示的な{passive: true}ないwheelイベントは、マウスホイールと2本指のトラックパッドスクロールの場合でも、同期スクロールを強制します。 （私はここにいくつかの微妙な点についてのブログ投稿を書きました。）

また、私たち（Edgeチーム）は同じ介入を実装するつもりはないので、パッシブイベントリスナーを出荷するときは、 {passive: true}を明示的に指定する必要があります。

参考までに、私はパッシブ：falseパスを下り始め、スクロールdivがあるときにモバイルで本体がスクロールしないようにしましたが、preventDefault（）を使用してスクロールをブロックするのは少し重いです。 divが存在するかどうかに応じてハンドラーを追加および削除するか、body.height = 100％アプローチにフォールバックすることができます。 body.heightの修正は少しハッキーな感じがしますが、パッシブは必要ありません。falseです。

私のユースケースでは、 event.preventDefault()メソッドを使用して、ユーザーが要素をコンテナ内にドラッグしているときにコンテナがスクロールしないようにします。

そのためには、イベントリスナーを非パッシブ（パッシブ：false）として登録する必要があります。
ブラウザがパッシブに切り替わっているので：デフォルトではtrueですが、反対のことができるようにしたいと思います

残念ながら、 touch-action: none;スタイルはタッチ開始後に適用されているため、使用できません。おそらくそれが効果がない理由です。

それは確かにすぐに問題になるでしょう、私は2年で解決策が見つからなかったことに驚いています。 また、イベントリスナーを手動で作成することは、Reactのアンチパターンです。

そして、それが重大な変化を生み出すのであれば、そうなるでしょう。 しかし、私は物語の一部を見逃しているかもしれません。

私に@romulofによって提案された新しいイベントリスナ署名などのhttps://github.com/facebook/react/issues/6436#issuecomment -254331351。
ここで説明する問題の修正に加えて、 onceなどの他のEventListenerOptionsを指定することも可能です。

私はちょうどこの問題に遭遇しました。 ユーザーが描くことができるキャンバスがあります。 Androidで描画する場合、ペイントストロークを実行する代わりに、「プルして更新」することがあります。 これは、それが現実の問題であることを示しています。 今のところonTouch{Start,Move,End}を避け、回避策として手動でaddEventListenerを使用します。

@romulofが提案したアプローチがとても好きです。 ソリューションも重大な変更を必要としないようです。

@bobvanderlindenキャンバススタイルにtouch-action: none;を追加すると、うまくいくはずです。これは、そのユースケースに非常に適しています。 他の可能な値も非常に便利です。

ただし、@ piotr-czが指摘しているように、 touch-actionは、このパッシブイベントの問題全体を普遍的に解決するわけではありません。 また、子要素をドラッグしているときにコンテナがスクロールできないという同じ問題が発生しています。 すべての回避策はかなりハッキーであり、技術的負債を追加します。

残念ながら、非パッシブリスナーが存在すると、実際にそれに接続されているユーザーランドハンドラーがない場合でも、重大なジャンクが発生する可能性があります。 Chromeはverboseログレベルでそれについて通知します： [Violation] Handling of 'wheel' input event was delayed for 194 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive. （これはhttps://github.com/facebook/react/blob/92b7b172cce9958b846844f0b46fd7bbd8c5140d/packages/によって追加されたトップレベルのハンドラーですreact-dom / src / events / ReactDOMEventListener.js＃L155）

@romulof @lencioni @radubreharパッシブフラグがスクロールイベントリスナーでの使用を目的としていないという事実を知っていますか？ ブラウザのスクロールパフォーマンスを妨げないように、 touchmoveなどのイベントで使用する必要があります。 あなたの例は私を非常に混乱させます。

パッシブの設定は、キャンセルできないため、基本的なスクロールイベントでは重要ではありません。そのため、リスナーはページのレンダリングをブロックできません。

ソース： https ：

追加情報： https ：

はい、私は今これに気づいています。 以前に書いたときに誤解されました
コメント。 明確にしてくれてありがとう！

水曜日、2017年12月6日には、8:25マーティン・ホフマン[email protected]
書きました：

@romulof https://github.com/romulof @lencioni
https://github.com/lencioni @radubrehar https://github.com/radubrehar
パッシブフラグはでの使用を目的としていないという事実を知っていますか
スクロールイベントリスナー？ touchmoveなどのイベントで使用する必要があります。
ブラウザのスクロールパフォーマンスを妨げないようにします。 あなたの例
私には非常に混乱しています。

パッシブの設定は、基本的なスクロールイベントでは重要ではありません。
キャンセルされるため、リスナーはページのレンダリングをブロックできません。

ソース：
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners

追加情報：
https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

—
あなたが言及されたのであなたはこれを受け取っています。

このメールに直接返信し、GitHubで表示してください
https://github.com/facebook/react/issues/6436#issuecomment-349691618 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AAL7zgbNCpHNui-TX7r2FYdhVxZfdBX8ks5s9r_4gaJpZM4ICWsW
。

@ el-moalo-loco、パフォーマンスを向上させるためにスクロールイベントにパッシブリスナーを使用することについて、GoogleDevelopersサイトのいくつかのドキュメントを読んだことは間違いありません。 途中で読み間違えたり、何かが変わったに違いありません。 とにかく、説明してくれてありがとう！

@romulof @lencioni @ el-moalo-loco https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners
スクロールリスナーがパッシブである必要がない場合でも、ホイールリスナーはパッシブである必要があります。 それが混乱の原因かもしれないと思います。

@sebmarkbageどう思いますか？ このパッシブイベントリスナーのサポートにより、いつかReactに移行できるでしょうか？

やあ、

次のように、アクティブなイベントリスナーをcomponentDidMountに追加する必要がありました。

global.addEventListener("touchstart", this.touchStart(), { passive: false })

e.preventDefault()を呼び出して、Chromeのデフォルトのスクロールを停止し、 touchStart()内の要素を移動できるようにします。

どの要素を移動する必要があるかを知るために、次のようにJSX要素にonTouchStartを追加する必要がありました。

onTouchStart={this.touchStartSetElement(element)}

touchStartSetElement()で、 touchStart()読み取ることができる状態プロパティelement touchStartSetElement()を設定しました

Reactがアクティブなイベントリスナーをサポートする場合、これは1行に要約されます。

ありがとう、

フィリップ

PS：パッシブイベントリスナーでe.preventDefault()を呼び出そうとすると、Chrome56で次のエラーが発生します。

[介入]ターゲットがパッシブとして扱われるため、パッシブイベントリスナー内のDefaultを防ぐことができません。 https://www.chromestatus.com/features/5093566007214080を参照して

パッシブイベントは、Googleの「介入」と何らかの形でウェブを

iOS 11.3以降のSafariもデフォルトでパッシブに設定されており、 touch-action:noneの従来の回避策はサポートされていないため、これはさらに問題になりつつ

小道具のように機能するカスタム参照ハンドラーを作成できるRFChttps ：//github.com/reactjs/rfcs/pull/28を提案しました（つまり、 onClickようにプロパティを使用しますが、代わりに計算を使用しますプロパティ構文とハンドラーは、refとpropの値の情報と更新を取得します）。 これらは、お持ちのほぼすべての高度なユースケースのライブラリを作成するために使用できます。

• パッシブ、明示的に非パッシブ、1回、およびキャプチャイベントはすべて簡単に実行できます。
• イベントハンドラーの登録よりもさらに高度なことを行うことができます。
• ユーザーの観点からは、それらは簡単に使用でき、ライブラリが計算プロパティとして提供するものを任意の要素に渡すだけです。 例： import {onScroll} from 'react-passive-events'; <div [onScroll]={scrollHandler} />

これらがすべてのイベントを登録する方法であるべきではないと思います。

ただし、考えられるすべてのタイプのイベント（キャプチャ、パッシブなど）の登録を処理する複雑な方法を考え出す代わりに、ほとんどのイベント（パッシブまたは非パッシブ）のデフォルトの動作を決定し、これらの登録済みを使用することをお勧めしますより高度なユースケースを処理するための小道具。

iOS 11.3では、すべてのタッチイベントがデフォルトでパッシブになりました。 したがって、タッチイベントハンドラーでevent.preventDefault（）を呼び出すと、効果がなくなります😢

https://codesandbox.io/s/l4kpy569ol

非パッシブイベントハンドラーを強制することができなければ、iOS11.3の変更を回避するのに苦労していますhttps://github.com/atlassian/react-beautiful-dnd/issues/413

私はVue.jsがこれをどのように処理しているかを見に来ました、そして私は彼らのアプローチがとても好きです：

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

修飾子のリストは次のとおりです。

• 。ストップ
• 。防ぐ
• 。捕獲
• 。自己
• 。一度
• 。受動的

また、イベントを好きなように作成できます。 たぶん、これはこの問題のインスピレーションとして役立つ可能性があります。

@KeitIG私はReact用に設計されたVueローダーのフォークに取り組んでいます

https://github.com/stalniy/react-webpack-loader

これは私を悲しくさせます

これがすでに提案されているかどうか、または私以外の誰かにとって意味があるかどうかはわかりませんが、次のようになります。

onTouchStart={listener} 

に

onTouchStart={listener, options}

どちらも{ passive, true, once: true }などの受け渡しオプションを自然な方法にし、 addEventListenerスキーマとも一致します。

@phaistonianの提案に移行すると、今日存在するonEventNameCaptureハンドラーが不要になります。

@alexreardon私は本当にそれはオプションではないと思います。プレーンなjsでは、 listener, optionsは式であり、 optionsと評価されるため、上記の構造はあなたが意図するものではありません。 これには、jsxをjsにコンパイルする方法を変更する必要があり、重大な変更になります。 反応チームがこのルートに行くとは思えません。

意見は？

それが表現であるということに関しては、同じ意図で別の方法で行うことができます。

おそらく多くのオプションがあります。 オプションは次のとおりです。

import {handler} from 'React';

onTouchStart={handler(listener, options)}

onTouchStart={{listener, options}}

また

onTouchStart={[listener, options]}

また

onTouchStart={listener} onTouchStartOptions={options}

私はオブジェクトを渡すというアイデアが一番好きです。 いずれにせよ、これには解決策が必要です。

まだ解決策はありますか？

まだ解決策はありますか？

あなたの古典的なaddEventListenerとremoveEventListenerはそれぞれcomponentDidMountとcomponentWillUnmountます。

うん、それは最悪だ。

そして、フックを使ってそれを解決するためにあなたはどう思いますか？

...
const onClickPassive = useEventListener((e) => {
 console.log('passive event')
}, { passive: true })

return (
  <button onClick={onClickPassive}>Click me</button>
)

@ ara4nはフックを使用するのが良いですが、フック以外の反応のための古典的な解決策がまだ必要です

@sebmarkbageこれに関する更新はありますか？ Chromeはこれを出荷したばかりで、アプリを壊しました。

https://www.chromestatus.com/features/6662647093133312

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
onWheelイベントリスナーでデフォルトのスクロール動作をブロックしようとすると、再び発生します

@kychanbi私と同じですが、このエラーは

@kychanbiああ、これはドキュメントレベルのWheel / Mousewheelイベントリスナーをパッシブとして扱う

コンポーネントコンテナでcssプロパティを使用できますdivtouch-action：none

。容器 {
タッチアクション：なし;
}

@madcherマウスイベントでは機能しないようです。
私はついにネイティブJavaScriptを使用してそれを解決しました
element.addEventListener("wheel", eventHandler);

この問題に直面している人を助けるための小さなスニペット：

import React, { useRef, useEffect } from 'react'

const BlockPageScroll = ({ children }) => {
  const scrollRef = useRef(null)
  useEffect(() => {
    const scrollEl = scrollRef.current
    scrollEl.addEventListener('wheel', stopScroll)
    return () => scrollEl.removeEventListener('wheel', stopScroll)
  }, [])
  const stopScroll = e => e.preventDefault()
  return (
    <div ref={scrollRef}>
      {children}
    </div>
  )
}

const Main = () => (
  <BlockPageScroll>
    <div>Scrolling here will only be targeted to inner elements</div>
  </BlockPageScroll>
)

@madcher

どういうわけかonWheel小道具はcss touch-action: none;では機能しません

    componentRef = React.createRef(null);
    handleWheel = (e) => {
      e.preventDefault();
    }
    render() {
      <Container style={{ touchAction: 'none' }} onWheel={this.handleWheel}>
        ...
      </Container>
    }

まだこのエラーが発生します：
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

作業バージョン

@markpradhanのフックソリューションの代わりに、まだ古いスタイルのコンポーネントを使用している場合は、次のようにすることができます。

    componentRef = React.createRef();
    handleWheel = (e) => {
      e.preventDefault();
    }
    componentDidMount() {
      if (this.componentRef.current) {
        this.componentRef.current.addEventListener('wheel', this.handleWheel);
      }
    }
    componentWillUnmount() {
      if (this.componentRef.current) {
        this.componentRef.current.removeEventListener('wheel', this.handleWheel);
      }
    }
    render() {
      <Container ref={this.componentRef}>...</Container>
    }

@Fongerおそらく＃14856が原因

このようなものが提案されていますが、ここにいくつかのアイデアがあります。

function MyComponent() {
  function onScroll(event) { /* ... */ }
  onScroll.options = {capture, passive, ...};
  return <div onScroll={onScroll} />;
}

これにより、重大な変更を行うことなく、パッシブイベントに簡単にオプトインしたり、イベントをキャプチャしたりできます。 しかし、私はデフォルトのパッシブイベントリスナーのアイデアに興味をそそられました。 私は、preventDefaultが（とりわけ）Reactがワーカーで実行されるのを妨げる主要な障害であることを覚えています。

js function MyComponent() { function onScroll(event) { /* ... */ } onScroll.shouldPreventDefault = (event): boolean => { // some logic to decide if preventDefault() should be called. } onScroll.shouldStopPropagation = (event): boolean => { // some logic to decide if stopPropagation() should be called. } return <div onScroll={onScroll} />; }
これが重大な変更にならないようにするのは難しいでしょうが、これが強制された場合、イベントをpreventDefault edする必要があるかどうかを判断するすべてのコードがコードに分離され、Reactは次のことができるようになります。その部分だけをメインスレッドで実行し、他のすべてを別のワーカーで、または非同期で実行します。

これが解決されるまで、 event.preventDefault()への参照がドキュメントから削除されるか、少なくともパッシブイベントでChromeがpreventDefaultを使用できないことに関する警告が表示されているとよいと思います。

Reactv17からのイベント委任の変更の影響について疑問に思います。 Lighthouseには、非パッシブイベントに対してテストするルールhttps://web.dev/uses-passive-event-listeners/があります。

以前は、 <div onTouchStart />がドキュメントに登録されていましたが、これはパッシブです。 ただし、React v17では、イベントはReactツリーのルートに登録されます。Reactツリーは、特に要求しない限りパッシブではなくなります。

複製： https ： demo.js 、ライブ： https ：

うん。 懸念しているようです。 新しい問題を提出します。

React17の議論のためにhttps://github.com/facebook/react/issues/19651を提出しました。