반응의 합성 이벤트를 설명하는 방법

React 합성 이벤트는 React에서 기본 DOM 이벤트의 모든 기능을 시뮬레이션하는 이벤트 개체입니다. 즉, 브라우저 기본 이벤트에 대한 크로스 브라우저 래퍼입니다. W3C 사양에 따라 합성 이벤트를 정의하고 모든 브라우저와 호환됩니다. 브라우저 기본 이벤트와 동일한 기능을 갖습니다. 동일한 인터페이스입니다. React에서는 모든 이벤트가 합성이고 기본 DOM 이벤트가 아니지만 DOM 이벤트는 "e.nativeEvent" 속성을 통해 얻을 수 있습니다.

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

1. 합성 이벤트란 무엇인가요?

React의 브라우저 기반 이벤트 메커니즘 자체는 이벤트 등록, 이벤트 합성, 이벤트 버블링, 이벤트 발송 등을 포함한 일련의 이벤트 메커니즘을 구현합니다.

이 React의 이벤트 메커니즘 세트를 합성 이벤트라고 합니다

SyntheticEvent

React 합성 이벤트(SyntheticEvent)는 React의 기본 DOM 이벤트, 즉 브라우저 기본 Cross의 모든 기능을 시뮬레이션하는 이벤트 개체입니다. -이벤트용 브라우저 래퍼. W3C 사양에 따라 합성 이벤트를 정의하고 모든 브라우저와 호환되며 브라우저 기본 이벤트와 동일한 인터페이스를 갖습니다. 예를 들어

const button = <button onClick={handleClick}>按钮</button>

React에서는 모든 이벤트가 합성이며 기본 DOM 이벤트가 아니지만 e.nativeEvent 속성을 통해 DOM 이벤트를 얻을 수 있습니다. 예:

const handleClick = (e) => console.log(e.nativeEvent);;
const button = <button>按钮</button>

위에서 볼 수 있듯이 React 이벤트와 네이티브 이벤트는 매우 유사하지만 몇 가지 차이점이 있습니다.

• 이벤트 이름의 이름이 다릅니다

// 原生事件绑定方式
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件绑定方式
const button = <button onClick={handleClick}>按钮命名</button>

• 이벤트 핸들러 함수는 다음과 같습니다. 다르게 작성되었습니다

// 原生事件 事件处理函数写法
<button onclick="handleClick()">按钮命名</button>
      
// React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>按钮命名</button>

onclick은 DOM 요소에 바인딩된 것처럼 보이지만 실제로는 이벤트 프록시 기능을 실제 노드에 직접 바인딩하지 않고 대신 통합된 구조를 사용하여 모든 이벤트를 구조의 가장 바깥쪽 레이어에 바인딩합니다. 모니터링할 이벤트. [관련 권장 사항: Redis 비디오 튜토리얼, 프로그래밍 튜토리얼]

이 이벤트 리스너는 모든 구성 요소 내에 이벤트 수신 및 처리 기능을 저장하기 위한 매핑을 유지 관리합니다. 구성 요소가 마운트되거나 마운트 해제되면 이 통합 이벤트 리스너에 일부 개체를 삽입하거나 제거하기만 하면 됩니다.

이벤트가 발생하면 먼저 이 통합 이벤트 리스너에 의해 처리된 다음 매핑에서 실제 이벤트 처리 함수를 찾아 호출합니다. 이는 이벤트 처리 및 재활용 메커니즘을 단순화하고 효율성을 크게 향상시킵니다.

2. 실행 순서

React 합성 이벤트와 네이티브 이벤트의 실행 순서는 다음 예를 보면 됩니다.

import  React  from 'react';
class App extends React.Component{

  constructor(props) {
    super(props);
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }
  componentDidMount() {
    console.log("React componentDidMount！");
    this.parentRef.current?.addEventListener("click", () => {
      console.log("原生事件：父元素 DOM 事件监听！");
    });
    this.childRef.current?.addEventListener("click", () => {
      console.log("原生事件：子元素 DOM 事件监听！");
    });
    document.addEventListener("click", (e) => {
      console.log("原生事件：document DOM 事件监听！");
    });
  }
  parentClickFun = () => {
    console.log("React 事件：父元素事件监听！");
  };
  childClickFun = () => {
    console.log("React 事件：子元素事件监听！");
  };
  render() {
    return (
      <div ref={this.parentRef} onClick={this.parentClickFun}>
        <div ref={this.childRef} onClick={this.childClickFun}>
          分析事件执行顺序
        </div>
      </div>
    );
  }
}
export default App;

출력 순서는

原生事件：子元素 DOM 事件监听！ 
原生事件：父元素 DOM 事件监听！ 
React 事件：子元素事件监听！ 
React 事件：父元素事件监听！ 
原生事件：document DOM 事件监听！

다음과 같은 결론을 내릴 수 있습니다.

• React 모든 이벤트 이벤트는 모두 문서 개체에 마운트됩니다.

• 실제 DOM 요소가 이벤트를 트리거하면 문서 개체로 버블링된 다음 React 이벤트를 처리합니다.

• 그래서 기본 이벤트는 먼저 실행된 후 React 이벤트가 처리됩니다

• 마지막으로 문서에 탑재된 이벤트

가 실제로 실행되는 해당 과정은 그림과 같습니다.

그래서 원하는 경우 서로 다른 시간대의 버블링 동작을 방지하려면 다음과 같은 다양한 방법을 사용해야 합니다.

• Block 합성 이벤트 간의 버블링을 방지하려면 e.stopPropagation()

• 을 사용하여 합성 이벤트 간의 버블링을 중지합니다. e.nativeEvent.stopImmediatePropagation()

• 을 사용하여 합성 이벤트가 버블링되는 것을 방지하려면 e.target

document.body.addEventListener('click', e => {   
    if (e.target && e.target.matches('div.code')) {  
        return;    
    }    
    this.setState({   active: false,    });   }); 
}

을 판단하여 가장 바깥쪽 문서에서 네이티브 이벤트 버블링을 방지할 수 있습니다. 3. 요약

React 이벤트 메커니즘은 다음과 같이 요약됩니다.

• React에 등록된 이벤트는 결국 바인딩됩니다. React 구성 요소에 해당하는 DOM이 아닌 문서의 DOM에 설정됩니다(메모리 오버헤드가 줄어듭니다). 모든 이벤트는 문서에 바인딩되어 있고 다른 노드에는 바인딩된 이벤트가 없기 때문입니다)

• React 자체는 일련의 이벤트 버블링 메커니즘을 구현하므로 event.stopPropagation()이 유효하지 않습니다.

• React는 큐를 통해 트리거된 구성 요소에서 상위 구성 요소까지 추적한 다음 JSX

• React에 자체 합성 이벤트 세트인 SyntheticEvent

에 정의된 콜백을 호출합니다(동영상 공유 학습 : 프로그래밍 기초 영상)

위 내용은 반응의 합성 이벤트를 설명하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!