React: निष्क्रिय घटना श्रोताओं का समर्थन करें

यह क्रोम 51 में उतरा। क्या रिएक्ट में इसका समर्थन करने के लिए कोई अद्यतन योजना है? :ओ

यह कैसे संभव है यदि रिएक्ट में दस्तावेज़ पर केवल एक ईवेंट श्रोता है, और फिर दूसरों को प्रतिनिधि देता है?
@sebmarkbage

निष्क्रिय घटनाओं के साथ समस्या की वर्तमान स्थिति क्या है?

मैंने व्हील इवेंट को संभालने के बारे में क्रोम में एक चेतावनी दी है, जिसे एक निष्क्रिय ईवेंट हैंडलर के रूप में पंजीकृत होने पर अनुकूलित किया जा सकता है। तो रिएक्ट में इसका होना साफ-सुथरा होगा!

आप मनमाने विकल्पों को भी संभालना चाहेंगे, जैसे once जो पहले ही फ़ायरफ़ॉक्स में रात में आ चुका है: https://twitter.com/mozhacks/status/758763803991474176। पूरी सूची: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

FWIW, जब साइडबार या चैट विंडो स्क्रॉल किए जाते हैं, तो फेसबुक बाहरी स्क्रॉलिंग को ब्लॉक करने के लिए सक्रिय व्हील इवेंट को सुनता है। हम इसके बिना UI को लागू नहीं कर सकते। हम अभी भी एक विकल्प के रूप में इसका समर्थन करना चाहते हैं लेकिन समस्या स्थान अभी भी अधूरा है इसलिए इस समस्या के वैकल्पिक समाधान विकसित हो सकते हैं जिसमें निष्क्रिय घटना श्रोता शामिल नहीं हैं। तो यह अभी भी एक सक्रिय डिजाइन स्थान है।

दोनों सक्रिय श्रोताओं को रखना और निष्क्रिय श्रोताओं को समर्थन देना महत्वपूर्ण है।
डेस्कटॉप एप्लिकेशन पर आप कोई अंतर नहीं देखते हैं, लेकिन मोबाइल एप्लिकेशन पर निष्क्रिय स्क्रॉल श्रोता एक महान गति को बढ़ावा देते हैं।

छोटा सुझाव:

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

@romulof हाँ, इस तरह आप कैप्चर चरण पर भी ईवेंट पंजीकृत करते हैं

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

इसलिए मुझे लगता है कि निष्क्रिय घटनाओं का भी समर्थन करने के लिए यह उचित एपीआई होगा।

साइड नोट: एक मुश्किल सवाल है - कैप्चर चरण के लिए आप निष्क्रिय घटनाओं को कैसे पंजीकृत करेंगे? मुझे लगता है कि निष्क्रिय घटनाओं की प्रकृति से यह संभव नहीं है। चूंकि उन्हें event.preventDefault() पर कॉल करने की भी अनुमति नहीं है, इसलिए शायद यह एक गैर-मुद्दा है।

@radubrehar , onScrollCapturePassive ऊंट के मामले में पूरी बाइबिल की तरह दिखता है।

:) यह मामला नहीं है, क्योंकि कैप्चर चरण पर कोई निष्क्रिय घटना नहीं है।

निश्चित रूप से इसका कोई मतलब नहीं है, लेकिन मैं इस पर भरोसा नहीं करूंगा। अन्य प्रकार के ईवेंट बाइंडिंग भी हैं, जैसे once ।

एक और सुझाव:

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

इस तरह रिएक्ट को यह पता लगाना होगा कि क्या ईवेंट हैंडलर एक फ़ंक्शन (सामान्य बाइंडिंग) है, या और ऑब्जेक्ट जिसमें बाइंडिंग विकल्प और हैंडलर फ़ंक्शन है।

मुझे लगता है कि विकल्पों के साथ ऑब्जेक्ट दृष्टिकोण onFooPassive से अधिक समझ में आता है, क्योंकि ऐसे अन्य विकल्प हैं जिनकी आवश्यकता हो सकती है। यदि @sebmarkbage के सुझाव के साथ जोड़ा जाए कि ईवेंट डिफ़ॉल्ट रूप से निष्क्रिय होना चाहिए, तो यह शायद बहुत बोझिल नहीं होगा।

एक अन्य दृष्टिकोण जो दिमाग में आता है, वह यह होगा कि ईवेंट हैंडलर को गुण संलग्न करें ताकि वे निष्क्रिय मोड से बाहर निकल सकें (या अन्य विकल्पों को टॉगल कर सकें)। कुछ इस तरह:

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

  handleScroll() {
    ...
  }

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

सिद्धांत रूप में, यह सज्जाकारों के साथ बहुत अच्छी तरह से काम करेगा, एक बार जब वे उतरेंगे।

इसके बारे में थोड़ा और सोचते हुए, मुझे लगता है कि अलग-अलग विकल्पों के बजाय, ईवेंट विकल्प प्रॉपर्टी को फ़ंक्शन में जोड़ना बेहतर होगा। यह रिएक्ट को संभावित रूप से कई के बजाय केवल एक संपत्ति के बारे में चिंता करने की अनुमति देगा। तो, ऊपर मेरे उदाहरण को समायोजित करने के लिए:

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

  handleScroll() {
    ...
  }

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

एक और विचार जो मेरे साथ हुआ वह यह है कि यह कैसा दिख सकता है यदि हम 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 रिएक्ट हैंडलर को "सिंथेटिक इवेंट्स" पास किया जाता है, जो मूल घटनाओं की तरह होते हैं, लेकिन अलग होते हैं। वैसे, अधिक ज्ञान वाले किसी व्यक्ति को जो मैं कहने जा रहा हूं उसे सही करना चाहिए क्योंकि मैंने वास्तव में ऐसा कोड नहीं पढ़ा है जो ऐसा करता है।

मैं कार्यान्वयन विवरण से सुपर परिचित नहीं हूं, लेकिन मुझे पता है कि preventDefault कम से कम _ काम करता है जब तक कि आप जिन हैंडलर को रोक रहे हैं वे भी रिएक्ट इवेंट हैंडलर_ हैं। वैसे भी मेरा अनुभव यही रहा है।

stopPropagation आपके भाग्य से बाहर होने की अधिक संभावना है (उदाहरण के लिए आपके पास document क्लिक श्रोता है जो प्रतिक्रिया के साथ बाध्य नहीं हो सकता है, और यदि आप अंदर क्लिक करते हैं तो आप बुलबुले से बचना चाहते हैं एक निश्चित तत्व)। उस स्थिति में आप उपयोग कर सकते हैं:

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

[[एमडीएन](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation)]

यह मुख्य विषय से थोड़ा हटकर था, लेकिन संक्षिप्त उत्तर यह है कि रिएक्ट निष्क्रिय घटनाओं का उपयोग नहीं करता है, उन्हें कभी-कभी एक अजीब क्रम में संभाला जाता है।

@joshjg @ benwiley4000 @gaearon हाल ही में क्रोम टीम ने दस्तावेज़-स्तरीय स्पर्श ईवेंट के लिए अपना दृष्टिकोण बदल दिया है, जिससे वे डिफ़ॉल्ट रूप से निष्क्रिय हो गए हैं। और चूंकि रिएक्ट दस्तावेज़-स्तर पर घटनाओं को जोड़ता है, इसलिए आपको यह नया व्यवहार मिलता है।

देखें https://www.chromestatus.com/features/5093566007214080

इसने परोक्ष रूप से रिएक्ट के व्यवहार को बदल दिया है - मुझे लगता है कि रिएक्ट घटनाओं को संलग्न करते समय स्पष्ट रूप से passive: false उल्लेख नहीं करता है - इसलिए व्यवहार में परिवर्तन।

मैंने इसे अभी भी मारा है - इसलिए आपको addEventListener के साथ हाथ से स्पर्श ईवेंट पंजीकृत करने की आवश्यकता है

FYI Edge 16 पैसिव इवेंट लिसनर को शिप करेगा । यह उन प्रमुख ब्राउज़रों में से

ध्यान दें कि डिफ़ॉल्ट रूप से क्रोम निष्क्रिय हस्तक्षेप केवल touchstart और touchmove पर लागू होता है, न कि wheel । तो स्पष्ट {passive: true} बिना एक wheel घटना अभी भी मूसव्हील और टू-फिंगर ट्रैकपैड स्क्रॉलिंग के लिए सिंक्रोनस स्क्रॉलिंग को बाध्य करेगी। (मैंने यहां कुछ सूक्ष्मताओं के बारे में एक ब्लॉग पोस्ट लिखा है।)

साथ ही हमारा (एज टीम) उसी हस्तक्षेप को लागू करने का कोई इरादा नहीं है, इसलिए जब हम निष्क्रिय ईवेंट श्रोताओं को शिप करते हैं तब भी आप स्पष्ट रूप से {passive: true} निर्दिष्ट करना चाहेंगे।

एफवाईआई, मैंने स्क्रॉलिंग div होने पर शरीर को मोबाइल पर स्क्रॉल करने से रोकने के लिए निष्क्रिय: झूठा पथ नीचे जाना शुरू कर दिया, लेकिन स्क्रॉलिंग को अवरुद्ध करने के लिए रोकथाम डीफॉल्ट() का उपयोग करना थोड़ा भारी है। मैं जोड़ सकता हूं और हैंडलर को हटा सकता हूं, अगर div मौजूद है, या शरीर पर वापस आ जाता है। ऊंचाई = 100% दृष्टिकोण। body.height फिक्स थोड़ा हैकी लगता है, लेकिन तब मुझे निष्क्रिय की आवश्यकता नहीं होगी: बिल्कुल झूठ।

मेरा उपयोग यह है कि जब उपयोगकर्ता इसके अंदर तत्व खींच रहा है तो मैं कंटेनर स्क्रॉलिंग को रोकने के लिए event.preventDefault() विधि का उपयोग करना चाहता हूं।

उसके लिए, मुझे ईवेंट श्रोता को गैर-निष्क्रिय (निष्क्रिय: असत्य) के रूप में पंजीकृत करने की आवश्यकता है।
चूंकि ब्राउज़र निष्क्रिय में स्विच कर रहे हैं: डिफ़ॉल्ट रूप से सत्य, मैं इसके विपरीत करने में सक्षम होना चाहता हूं

दुर्भाग्य से मैं touch-action: none; शैली का उपयोग करने में सक्षम नहीं हूं क्योंकि स्पर्श शुरू होने के बाद इसे लागू किया जा रहा है और शायद इसलिए इसका कोई प्रभाव नहीं पड़ता है।

यह वास्तव में जल्द ही एक समस्या होने जा रही है, मुझे आश्चर्य है कि दो साल में कोई समाधान नहीं मिला। और इवेंट श्रोताओं को मैन्युअल रूप से बनाना प्रतिक्रिया में एक विरोधी पैटर्न है।

और अगर यह ब्रेकिंग परिवर्तन पैदा करता है, तो ऐसा ही हो। हालाँकि मुझे कहानी का एक हिस्सा याद आ रहा है।

मुझे https://github.com/facebook/react/issues/6436#issuecomment -254331351 में @romulof द्वारा प्रस्तावित नया ईवेंट श्रोता हस्ताक्षर पसंद है।
यहां वर्णित समस्या को ठीक करने के अलावा अन्य EventListenerOptions जैसे once को निर्दिष्ट करना संभव होगा

मैं अभी इस मुद्दे में भाग गया। मेरे पास एक कैनवास है जहां उपयोगकर्ता आकर्षित कर सकता है। एंड्रॉइड पर ड्राइंग करते समय यह कभी-कभी पेंट-स्ट्रोक करने के बजाय 'रिफ्रेश करने के लिए खींचें'। इससे पता चलता है कि यह एक वास्तविक दुनिया की समस्या है। मैं अभी के लिए onTouch{Start,Move,End} से बचूंगा और वर्कअराउंड के रूप में मैन्युअल रूप से addEventListener उपयोग करूंगा।

मुझे @romulof द्वारा सुझाए गए दृष्टिकोण को बहुत पसंद है। ऐसा लगता है कि समाधान को भी तोड़ने वाले परिवर्तनों की आवश्यकता नहीं है।

@bobvanderlinden अपनी कैनवास शैली में touch-action: none; जोड़ना आपके लिए काम करना चाहिए, यह वास्तव में उस उपयोग के मामले के लिए चमकता है। अन्य संभावित मूल्य भी काफी सुविधाजनक हो सकते हैं।

हालाँकि जैसा कि @piotr-cz ने बताया, touch-action इस निष्क्रिय घटनाओं के मुद्दे को समग्र रूप से हल नहीं करता है। मैं एक कंटेनर को बाल तत्व खींचते समय स्क्रॉल करने से रोकने के एक ही मुद्दे में भी भाग रहा हूं। सभी वर्कअराउंड बहुत हैकी हैं और तकनीकी ऋण जोड़ते हैं।

दुर्भाग्य से किसी भी गैर-निष्क्रिय श्रोता की उपस्थिति महत्वपूर्ण जंक का कारण बन सकती है, भले ही कोई उपयोगकर्तालैंड हैंडलर वास्तव में इससे जुड़े न हों। क्रोम आपको इसके बारे में 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/ द्वारा जोड़ा गया शीर्ष-स्तरीय हैंडलर है। प्रतिक्रिया-डोम/src/घटनाओं/ReactDOMEventListener.js#L155)

@romulof @lencioni @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

हां, मुझे अब इसकी जानकारी हो गई है। जब मैंने अपना पहले लिखा था तो मुझे गलत सूचना दी गई थी
टिप्पणियाँ। स्पष्टीकरण देने के लिए धन्यवाद!

बुधवार, 6 दिसंबर, 2017, 8:25 पूर्वाह्न पर मार्टिन हॉफमैन नोटिफिकेशन @github.com
लिखा था:

@romulof https://github.com/romulof @lencioni
https://github.com/lencioni @radubrehar https://github.com/radubrehar
क्या आप इस तथ्य से अवगत हैं कि निष्क्रिय ध्वज उपयोग के लिए नहीं है
स्क्रॉल घटना श्रोता? इसका उपयोग टचमूव आदि घटनाओं पर किया जाना चाहिए।
ब्राउज़र के स्क्रॉलिंग प्रदर्शन में हस्तक्षेप न करने के लिए। आपके उदाहरण
मुझे बहुत भ्रमित कर रहे हैं।

मूल स्क्रॉल ईवेंट के लिए पैसिव सेट करना महत्वपूर्ण नहीं है, क्योंकि यह नहीं कर सकता
रद्द किया जा सकता है, इसलिए इसका श्रोता वैसे भी पेज रेंडरिंग को ब्लॉक नहीं कर सकता है।

स्रोत:
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, मुझे पूरा यकीन है कि मैंने प्रदर्शन में सुधार के लिए स्क्रॉल ईवेंट के लिए निष्क्रिय श्रोताओं का उपयोग करने के बारे में Google डेवलपर साइट पर कुछ दस्तावेज़ पढ़े हैं। मैंने गलत पढ़ा होगा या रास्ते में कुछ बदल गया होगा। वैसे भी, स्पष्टीकरण के लिए बहुत बहुत धन्यवाद!

@romulof @lencioni @el-moalo-loco https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners
पहिया श्रोताओं को अभी भी निष्क्रिय होना चाहिए, भले ही स्क्रॉल श्रोता न हों। मुझे लगता है कि यह भ्रम का स्रोत हो सकता है।

@sebmarkbage आपको क्या लगता है? क्या यह निष्क्रिय घटना श्रोता समर्थन कभी-कभी प्रतिक्रिया में अपना रास्ता बना देगा?

नमस्ते,

मुझे बस इस तरह componentDidMount में एक सक्रिय ईवेंट श्रोता जोड़ना था:

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

ताकि मैं क्रोम की डिफ़ॉल्ट स्क्रॉलिंग को रोकने के लिए e.preventDefault() पर कॉल कर सकूं और एक तत्व को touchStart() में स्थानांतरित कर सकूं।

यह जानने के लिए कि मुझे किस तत्व को स्थानांतरित करना है, मुझे इस तरह JSX तत्व में onTouchStart जोड़ना पड़ा:

onTouchStart={this.touchStartSetElement(element)}

touchStartSetElement() मैंने एक राज्य संपत्ति element जिसे मैं touchStart() में पढ़ सकता हूं

यदि प्रतिक्रिया सक्रिय घटना श्रोताओं का समर्थन करेगी तो यह एक पंक्ति तक उबाल जाएगा।

धन्यवाद,

फिलिप

पीएस: यदि आप निष्क्रिय ईवेंट श्रोता में e.preventDefault() पर कॉल करने का प्रयास करते हैं तो आपको यह त्रुटि क्रोम 56 में मिलती है:

[हस्तक्षेप] निष्क्रिय घटना श्रोता के अंदर डिफ़ॉल्ट को रोकने में असमर्थ होने के कारण लक्ष्य को निष्क्रिय माना जा रहा है। देखें https://www.chromestatus.com/features/5093566007214080

Google के " हस्तक्षेप " और वेब को किसी भी तरह से

आईओएस 11.3 के रूप में सफारी के बाद से यह एक मुद्दा बन रहा है, निष्क्रिय करने के लिए भी डिफ़ॉल्ट है, और touch-action:none का शास्त्रीय समाधान

मैंने एक RFC https://github.com/reactjs/rfcs/pull/28 प्रस्तावित किया है जो कस्टम रेफ हैंडलर बनाने की अनुमति देगा जो प्रॉप्स की तरह काम करते हैं (यानी आप ऐसे गुणों का उपयोग करते हैं जैसे आप onClick लेकिन इसके बजाय गणना का उपयोग करें संपत्ति वाक्यविन्यास और हैंडलर रेफरी और प्रोप मूल्य जानकारी और अपडेट प्राप्त करता है)। इनका उपयोग आपके पास लगभग किसी भी उन्नत उपयोग के मामले के लिए पुस्तकालय बनाने के लिए किया जा सकता है।

• निष्क्रिय, स्पष्ट रूप से गैर-निष्क्रिय, एक बार, और घटनाओं को कैप्चर करना इसके साथ करना आसान है।
• केवल ईवेंट हैंडलर पंजीकरण से भी अधिक उन्नत चीजें उनके साथ की जा सकती हैं।
• उपयोगकर्ता के परिप्रेक्ष्य से वे उपयोग करने में आसान हैं, पुस्तकालय आपको किसी भी तत्व के लिए गणना की गई संपत्ति के रूप में देता है। उदाहरण के लिए import {onScroll} from 'react-passive-events'; <div [onScroll]={scrollHandler} />

मुझे नहीं लगता कि ये सभी घटनाओं को दर्ज करने का तरीका होना चाहिए।

हालांकि, सभी संभावित प्रकार की घटनाओं (कैप्चर करना, निष्क्रिय, आदि ...) को पंजीकृत करने के जटिल तरीकों के साथ आने के बजाय, मैं यह तय करने की सलाह देता हूं कि अधिकांश घटनाओं (निष्क्रिय या गैर-निष्क्रिय) के लिए डिफ़ॉल्ट व्यवहार क्या होना चाहिए और इनका उपयोग करना पंजीकृत अधिक उन्नत उपयोग के मामलों को संभालने के लिए सहारा।

IOS 11.3.1 में सभी टच इवेंट अब डिफ़ॉल्ट रूप से निष्क्रिय हैं। इस प्रकार किसी भी टच इवेंट हैंडलर में event.preventDefault() को कॉल करना अब गैर-प्रभावी है

https://codesandbox.io/s/l4kpy569ol

गैर-निष्क्रिय घटना संचालकों को बाध्य करने में सक्षम होने के बिना हमें iOS 11.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 मैं Vue-loader के एक कांटे पर काम कर रहा हूँ जिसे React के लिए डिज़ाइन किया गया है

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

ये मुझे दुखी करता है

सुनिश्चित नहीं है कि यह पहले से ही सुझाया गया है - या यदि यह मेरे अलावा किसी और के लिए कोई समझ में आता है, हालांकि:

onTouchStart={listener} 

प्रति

onTouchStart={listener, options}

दोनों पासिंग विकल्प जैसे { passive, true, once: true } इसे करने का एक प्राकृतिक तरीका बना देंगे, और यह addEventListener स्कीमा से भी मेल खाएगा।

@phaistonian के सुझाव की ओर onEventNameCapture हैंडलर की आवश्यकता समाप्त हो जाएगी

@alexreardon मुझे वास्तव में लगता है कि यह एक विकल्प नहीं है, क्योंकि सादे जेएस में, listener, options एक अभिव्यक्ति है, जो options मूल्यांकन करती है, इसलिए उपरोक्त निर्माण वह नहीं है जिसका आप मतलब रखते हैं। इसके लिए जेएसएक्स को जेएस में संकलित करने के तरीके को बदलने की आवश्यकता होगी और यह एक ब्रेकिंग बदलाव होगा। मुझे संदेह है कि प्रतिक्रिया टीम इस मार्ग पर जाएगी।

राय?

यह एक अभिव्यक्ति होने के संबंध में, इसे एक ही इरादे से अलग तरीके से किया जा सकता है।

शायद बहुत सारे विकल्प हैं। विकल्पों में शामिल हैं:

import {handler} from 'React';

onTouchStart={handler(listener, options)}

onTouchStart={{listener, options}}

या

onTouchStart={[listener, options]}

या

onTouchStart={listener} onTouchStartOptions={options}

हालांकि मुझे किसी वस्तु को पास करने का विचार सबसे ज्यादा पसंद है। किसी भी तरह से, इसे एक समाधान की जरूरत है।

क्या अभी तक कोई समाधान है?

क्या अभी तक कोई समाधान है?

आपका क्लासिक addEventListener और removeEventListener componentWillUnmount क्रमशः componentDidMount और componentWillUnmount ।

हाँ, यह बेकार है।

और आप एक हुक का उपयोग करके इसे हल करने के बारे में क्या सोचते हैं?

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

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

@ ara4n हुक का उपयोग करना अच्छा है, लेकिन गैर-हुक प्रतिक्रिया के लिए अभी भी एक शास्त्रीय समाधान की आवश्यकता है

@sebmarkbage इस पर कोई अपडेट? क्रोम ने अभी इसे शिप किया है और हमारे ऐप को तोड़ दिया है।

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 ओह, यह क्रोम 73 की विशेषता है जो दस्तावेज़ स्तर व्हील/माउसव्हील ईवेंट श्रोताओं को निष्क्रिय मानता है

आप अपने घटक कंटेनर div टच-एक्शन पर सीएसएस संपत्ति का उपयोग कर सकते हैं: कोई नहीं

कंटेनर {
स्पर्श-क्रिया: कोई नहीं;
}

@madcher ऐसा लगता है कि माउस ईवेंट के लिए काम नहीं करता है।
मैंने अंततः इसे देशी जावास्क्रिप्ट का उपयोग करके हल किया
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 प्रॉप्स सीएसएस के साथ काम नहीं करता है 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} />;
}

यह आपको आसानी से निष्क्रिय घटनाओं में शामिल होने देगा या बिना किसी बदलाव की आवश्यकता के घटनाओं को कैप्चर करने देगा। हालांकि, मैं डिफ़ॉल्ट ईवेंट श्रोता द्वारा एक निष्क्रिय के विचार से चिंतित था। मुझे याद है कि रोकथाम डिफॉल्ट एक बड़ी बाधा है (दूसरों के बीच) जो एक कार्यकर्ता में चलने से प्रतिक्रिया को रोकता है।

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 एड होने की आवश्यकता है, कोड में अलग किया जाएगा और रिएक्ट करने में सक्षम होगा बस उस हिस्से को मुख्य धागे पर चलाएं और बाकी सब कुछ एक अलग कार्यकर्ता या अतुल्यकालिक रूप से चलाएं।

जब तक इसका समाधान नहीं हो जाता, मुझे लगता है कि यह सबसे अच्छा होगा यदि दस्तावेज़ों से event.preventDefault() संदर्भ हटा दिए जाते हैं या कम से कम निष्क्रिय घटनाओं पर preventDefault में क्रोम की अक्षमता के बारे में चेतावनी के साथ चिह्नित किया जाता है।

मैं रिएक्ट v17 से घटना प्रतिनिधिमंडल के परिवर्तन के निहितार्थ के बारे में सोचता हूं। लाइटहाउस का एक नियम है https://web.dev/uses-passive-event-listeners/ जो गैर-निष्क्रिय घटनाओं के खिलाफ परीक्षण करता है।

पहले, दस्तावेज़ पर <div onTouchStart /> पंजीकृत किया जाता था, जो डिफ़ॉल्ट रूप से निष्क्रिय होता है । हालांकि, रिएक्ट v17 के साथ, घटना रिएक्ट ट्री की जड़ पर पंजीकृत है, जो अब विशेष रूप से पूछे बिना निष्क्रिय नहीं है।

प्रजनन: https://codesandbox.io/s/material-demo-forked-e2u72?file=/demo.js , लाइव: https://csb-e2u72.netlify.app/

हां। संबंधित लगता है। मैं एक नया मामला दर्ज करूंगा।

रिएक्ट 17 चर्चा के लिए https://github.com/facebook/react/issues/19651 फाइल किया गया।