반응 이벤트와 기본 이벤트의 차이점은 무엇입니까?-프런트엔드 Q&A-php.cn

반응 이벤트와 기본 이벤트의 차이점은 다음과 같습니다. 반응의 이벤트는 문서에 바인딩되고 기본 이벤트는 DOM에 바인딩됩니다. 바인딩 측면에서 DOM의 이벤트는 문서의 이벤트보다 우선순위가 높습니다. 반응의 이벤트 개체는 기본 개체가 아닌 합성 개체입니다.

반응 이벤트와 기본 이벤트의 차이점은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

리액트 이벤트와 네이티브 이벤트의 차이점은 무엇인가요?

리액트의 이벤트는 문서에 바인딩됩니다.

그리고 네이티브 이벤트는 돔에 바인딩됩니다.

그래서 바인딩 위치에 비해 DOM 이벤트는 다음과 같아야 합니다. 문서의 이벤트 이전에 실행됩니다

이벤트란 무엇인가요?

먼저 JS는 일부 동적 작업을 구현하는 것이며 사용자는 때때로 양식 제출, 마우스 클릭 등과 같은 일부 기능을 구현하기를 원하므로 브라우저에서 이 이벤트를 트리거해야 합니다. 그러면 브라우저가 감지(또는 사용자의 행동을 캡처하면 이벤트에 응답하고 처리합니다. 이것을 이벤트라고 합니다.

이벤트 객체란 무엇인가요?

시스템이 핸들러를 호출하면 이벤트에 대한 모든 정보를 객체로 캡슐화한 다음 이를 매개변수로 이벤트 핸들러에 전달하며, 이 객체가 이벤트 객체입니다. 네이티브 함수에서는 이벤트를 자주 볼 수 있는데, 이것을 우리는 이벤트 객체라고 부릅니다.

react는 이벤트 처리에 있어 다음과 같은 장점이 있습니다.

성능 최적화 목적을 달성하기 위해 거의 모든 이벤트를 문서에 위임합니다.
이벤트 유형별로 분포 함수를 균일하게 사용합니다(dispatchEven ) 디스패치 이벤트
이벤트 객체(이벤트)는 네이티브가 아닌 합성 객체(syntheticEvent)입니다

React 합성 이벤트

왜 합성 이벤트로 추상화되나요?

모든 이벤트 처리 기능이 DOM에 바인딩되어 있으면 페이지 응답 시 영향을 받아 페이지 속도가 매우 느려집니다. 이러한 DOM 이벤트의 남용을 방지하고 하단 레이어의 다양한 브라우저 이벤트 간의 시스템 차이점을 보호하기 위해 React는 중간 레이어인 SyntheticEvent

Principle

React에서 이벤트를 바인딩해야 하는 경우 일반적으로 이 작업을 수행합니다. JSX에서는 다음과 같이 작성됩니다.

我是react点击事件

로그인 후 복사

그러나 반응에서 클릭 이벤트는 실제로 div의 DOM에 바인딩되지 않고 DOCUMENT에 바인딩됩니다. document, React는 처리를 위해 이벤트 내용을 해당 함수에 넘겨줍니다

React에서 기본 이벤트를 사용하는 방법

React는 다음과 같은 거의 모든 기본 이벤트를 캡슐화하지만:

Modal이 켜집니다. 앞으로는 , 다른 빈 영역을 클릭하면 Modal을 닫아야 합니다

네이티브 이벤트로 구현된 일부 타사 라이브러리를 도입하고 서로 상호 작용

등이 있는 경우 비즈니스 로직 처리를 위해 네이티브 이벤트를 사용해야 합니다. .

네이티브 이벤트는 실제 DOM에 바인딩되어야 하기 때문에 일반적으로 componentdidmout/ref 함수 실행 단계에서 바인딩됩니다.

class Demo extends Domponent { componentDidMount () { const parentDom = ReactDom.findDOMNode(this) const childDom = parentDom.queneSelector('.button'); childDom.addEventListen('click',this.onDomClick, false) } onDOMClick = (e) => { } render () { return demo
 } }

로그인 후 복사

네이티브 이벤트와 합성 이벤트의 혼합 사용

비즈니스 시나리오에서 네이티브 이벤트와 합성 이벤트를 혼합해야 하는 경우 사용 중 다음 사항에 주의해야 합니다.

응답 순서

class Demo extends Domponent { componentDidMount () { const parentDom = ReactDom.findDOMNode(this) const childDom = parentDom.queneSelector('.button'); childDom.addEventListen('click',this.onDomClick, false) } onDOMClick = (e) => { console.log('dom event!') } onReactClick = (e) => { console.log('react event!') } render () { return demo
 } }

로그인 후 복사

결과 출력: