React: 수동 이벤트 리스너 지원

이것은 Chrome 51에 상륙했습니다. React에서 이를 지원하기 위한 업데이트된 계획이 있습니까? :영형

React가 문서에 이벤트 리스너가 하나만 있고 다른 사람에게 위임하는 경우 이것이 어떻게 가능합니까?
@sebmarkbage

수동 이벤트 문제의 현재 상태는 무엇입니까?

수동 이벤트 핸들러로 등록된 경우 최적화될 수 있는 휠 이벤트 처리에 대해 크롬에서 경고를 받았습니다. 따라서 React에서 이것을 갖는 것은 깔끔할 것입니다!

또한 야간에 Firefox에 이미 도착한 once 와 같은 임의의 옵션을 처리하고 싶을 수도 있습니다: https://twitter.com/mozhacks/status/758763803991474176. 전체 목록: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

FWIW, Facebook은 사이드바 또는 채팅 창이 스크롤될 때 외부 스크롤을 차단하기 위해 활성 휠 이벤트를 수신합니다. UI 없이는 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 의 제안과 결합하면

생각나는 또 다른 접근 방식은 이벤트 핸들러에 속성을 추가하여 패시브 모드에서 옵트아웃(또는 다른 옵션을 토글)할 수 있도록 하는 것입니다. 이 같은:

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

  handleScroll() {
    ...
  }

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

이론적으로 이것은 데코레이터가 착륙하면 꽤 잘 작동합니다.

이에 대해 조금 더 생각해보면 개별 옵션보다는 이벤트 옵션 속성을 함수에 추가하는 것이 더 나을 것 같다. 그러면 React는 잠재적으로 많은 속성 대신에 하나의 속성만 걱정하면 됩니다. 따라서 위의 예를 조정하려면 다음을 수행하십시오.

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를 통해 전달되도록 허용하는 방식으로 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 핸들러는 네이티브 이벤트와 비슷하지만 다른 "합성 이벤트"를 전달

나는 구현 세부 사항에 익숙하지 않지만 방지하려는 핸들러가 React 이벤트 핸들러인 한 최소한 preventDefault 작동한다는 것을 알고 있습니다. 어쨌든 제 경험이었습니다.

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 최근에 크롬 팀은 문서 수준 터치 이벤트에 대한 접근 방식을 변경하여 기본적으로 수동으로 만들었습니다. 그리고 React는 문서 수준에서 이벤트를 첨부하므로 이 새로운 동작을 얻게 됩니다.

https://www.chromestatus.com/features/5093566007214080 참조

이것은 간접적으로 React가 동작하는 방식을 변경했습니다. React가 이벤트를 첨부할 때 passive: false 명시적으로 언급하지 않는다고 가정합니다. 따라서 동작이 변경됩니다.

나도 방금 이것을 쳤다 - 그래서 당신은 addEventListener를 사용하여 손으로 터치 이벤트를 등록해야 한다

참고로 Edge 16 은 수동 이벤트 리스너를 제공 합니다. 아직 지원하지 않는 주요 브라우저 중

크롬 수동 별 기본 개입에만 적용됩니다 touchstart 및 touchmove 하지 wheel . 따라서 명시적인 {passive: true} 가 없는 wheel 이벤트는 마우스휠 및 두 손가락 트랙패드 스크롤에 대해 동기 스크롤을 계속 강제 실행합니다. (여기서 몇 가지 미묘한 부분에 대해 블로그 게시물을 작성했습니다.)

또한 우리(Edge 팀)는 동일한 개입을 구현할 의도가 없으므로 수동 이벤트 리스너를 제공할 때 {passive: true} 를 명시적으로 지정하기를 원할 것입니다.

참고로, 스크롤 div가 있을 때 모바일에서 본문이 스크롤되는 것을 방지하기 위해 passive: false 경로로 이동하기 시작했지만, 스크롤을 차단하기 위해 preventDefault()를 사용하는 것은 약간 무겁습니다. div가 있는지 여부에 따라 핸들러를 추가 및 제거하거나 body.height = 100% 접근 방식으로 대체할 수 있습니다. body.height 수정은 약간 해킹된 느낌이 들지만 수동: false가 전혀 필요하지 않습니다.

내 사용 사례는 event.preventDefault() 메서드를 사용하여 사용자가 내부에서 요소를 끌 때 컨테이너 스크롤을 방지하고 싶습니다.

이를 위해서는 이벤트 리스너를 non-passive(passive: false)로 등록해야 합니다.
브라우저가 수동으로 전환함에 따라 기본적으로 true, 나는 반대로 할 수 있기를 원합니다.

불행히도 touch-action: none; 스타일을 사용할 수 없습니다. 터치가 시작된 후에 적용되고 있고 아마도 아무런 효과가 없기 때문일 것입니다.

그것은 정말로 곧 문제가 될 것입니다. 저는 2년 동안 해결책을 찾지 못했다는 사실에 놀랐습니다. 그리고 수동으로 이벤트 리스너를 생성하는 것은 React에서 안티 패턴입니다.

그리고 그것이 주요 변경 사항을 생성하는 경우에도 마찬가지입니다. 그래도 이야기의 일부를 놓칠 수 있습니다.

https://github.com/facebook/react/issues/6436#issuecomment -254331351에서 @romulof 가 제안한 새로운 이벤트 리스너 서명이
여기에 설명된 문제를 수정하는 것 외에도 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://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

예, 저는 이제 이것을 알고 있습니다. 제가 예전에 글을 썼을 때 잘못 알고 있었어요.
코멘트. 설명해주셔서 감사합니다!

2017년 12월 6일 수요일, 오전 8:25 Martin Hofmann [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, 성능 향상을 위해 스크롤 이벤트에 수동 리스너를 사용하는 방법에 대해 Google 개발자 사이트에서 일부 문서를 읽었다고 확신합니다. 내가 잘못 읽었거나 그 과정에서 무언가가 변경되었을 것입니다. 어쨌든 많은 설명 감사합니다!

@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 을 설정했습니다.

React가 활성 이벤트 리스너를 지원한다면 이것은 한 줄로 요약될 것입니다.

감사 해요,

필립

추신: 수동 이벤트 리스너에서 e.preventDefault() 를 호출하려고 하면 Chrome 56에서 다음 오류가 발생합니다.

[중재] 대상이 수동으로 처리되기 때문에 수동 이벤트 수신기 내부에서 Default를 방지할 수 없습니다. https://www.chromestatus.com/features/5093566007214080 참조

수동 이벤트는 Google의 " 개입 "으로 인해 Chrome 56에서 기본이 되었고 어떻게든 웹을 깨뜨 렸지만 스크롤 속도도 빨라졌습니다.

iOS 11.3의 Safari도 기본적으로 수동으로 설정되어 있고 touch-action:none 의 기존 해결 방법이 지원되지 않기 때문에 이것은 더 많은 문제가 되고

소품처럼 작동하는 사용자 정의 참조 핸들러를 생성할 수 있는 RFC https://github.com/reactjs/rfcs/pull/28 을 제안했습니다(즉, onClick 와 같은 속성을 사용하지만 대신 계산 속성 구문과 핸들러는 ref 및 prop 값 정보 및 업데이트를 가져옵니다. 이것들은 당신이 가지고 있는 거의 모든 고급 사용 사례를 위한 라이브러리를 만드는 데 사용할 수 있습니다.

• 수동적, 명시적으로 비수동적, 한 번 및 이벤트 캡처는 모두 쉽게 수행할 수 있습니다.
• 이벤트 핸들러 등록보다 훨씬 더 발전된 작업을 수행할 수 있습니다.
• 사용자의 관점에서 보면 사용하기 쉽고 라이브러리에서 제공하는 것을 모든 요소에 계산된 속성으로 전달하기만 하면 됩니다. 예: import {onScroll} from 'react-passive-events'; <div [onScroll]={scrollHandler} />

나는 이것이 모든 이벤트를 등록 하는 방법이 되어야 한다고 생각하지 않습니다.

그러나 가능한 모든 유형의 이벤트(캡처, 수동 등...) 등록을 처리하는 복잡한 방법을 찾는 대신 대부분의 이벤트(수동 또는 비수동)에 대해 기본 동작이 무엇인지 결정하고 이러한 등록된 이벤트를 사용하는 것이 좋습니다. 고급 사용 사례를 처리하는 소품.

모든 터치 이벤트는 이제 iOS 11.3에서 기본적으로 수동입니다. 따라서 모든 터치 이벤트 핸들러에서 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 저는 React용으로 설계된 Vue-loader 포크를 작업 중입니다.

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}

그래도 객체를 전달한다는 아이디어가 가장 마음에 듭니다. 어느 쪽이든, 이것은 해결책이 필요합니다.

아직 해결책이 있습니까?

아직 해결책이 있습니까?

각각 componentDidMount 및 componentWillUnmount addEventListener 및 removeEventListener 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 저와 동일하지만 Windows 크롬에서만이 오류가 발생합니다.

@kychanbi 오, 문서 수준 Wheel/Mousewheel 이벤트 리스너를 수동으로 처리하는 Chrome 73의 기능입니다.

구성 요소 컨테이너 div touch-action: 없음에서 css 속성을 사용할 수 있습니다.

.컨테이너 {
터치 액션: 없음;
}

@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 소품이 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 이어야 하는지 결정하는 모든 코드가 코드에서 격리되고 React는 다음을 수행할 수 있습니다. 메인 스레드에서 해당 부분만 실행하고 나머지는 별도의 작업자 또는 비동기식으로 실행합니다.

이 문제가 해결될 때까지 event.preventDefault() 대한 참조가 문서에서 제거되거나 Chrome이 수동 이벤트에서 preventDefault 를 할 수 없다는 경고가 표시되는 것이 가장 좋습니다.

React v17부터 이벤트 위임 변경의 의미가 궁금합니다. Lighthouse에는 비수동 이벤트에 대해 테스트하는 https://web.dev/uses-passive-event-listeners/ 규칙이 있습니다.

이전에는 <div onTouchStart /> 가 문서에 등록 되었으며 기본적으로 수동 입니다. 그러나 React v17에서는 이벤트가 React 트리의 루트에 등록되므로 특별히 요청하지 않으면 더 이상 수동적이지 않습니다.

복제: https://codesandbox.io/s/material-demo-forked-e2u72?file=/demo.js , 라이브: https://csb-e2u72.netlify.app/

응. 우려되는 것 같습니다. 새로운 문제를 제기하겠습니다.

React 17 토론을 위해 https://github.com/facebook/react/issues/19651 에 제출했습니다.