React 소스 코드의 MessageChannel 사용법

이 글에서는 React 소스 코드의 MessageChannel 사용법을 분석합니다.

먼저 MessageChannel이 무엇인지 알아보겠습니다.

메시지 채널

채널 메시징 API의 MessageChannel 인터페이스를 사용하면 새 메시지 채널을 생성하고 두 개의 MessagePort 속성을 통해 이를 통해 데이터를 보낼 수 있습니다.

예

다음 예는 MDN 문서에서 선택되었으며, MessageChannel() 생성자를 사용하여 새 채널이 생성되는 것을 볼 수 있습니다.

IFrame이 로드되면 MessageChannel.port1에 대한 onmessage 핸들러를 등록하고 메시지와 함께 window.postMessage 메소드를 사용하여 MessageChannel.port2를 IFrame으로 전송합니다.

iFrame에서 메시지가 다시 수신되면 onMessage 함수는 해당 메시지를 단락으로 출력합니다.

const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");
// Wait for the iframe to load
iframe.addEventListener("load", onLoad);
function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;
  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
   channel.port2,
  ]);
}
// Handle messages received on port1
function onMessage(e) {
 output.innerHTML = e.data;
}

자, 이제 MessageChannel의 기본 사항을 이해했으니 React 소스 코드에서 사용법을 배워보겠습니다.

React 소스 코드의 MessageChannel 사용법:

const channel = new MessageChannel();
channel.port1.onmessage = callback;
channel.port2.postMessage(undefined);

React가 이를 사용하는 방법은 다음과 같습니다.

• 새 MessageChannel 인스턴스 생성: React는 두 개의 통신 포트가 있는 새 MessageChannel을 생성합니다.

• postMessage를 사용하여 작업 예약: React는 port2.postMessage(정의되지 않음)를 사용하여 setTimeout 또는 setImmediate에서 발생할 수 있는 지연이나 간섭 없이 작업을 비동기적으로 트리거합니다.

• onmessage가 트리거될 때 작업 실행: port1.onmessage가 게시된 메시지를 받으면 작업(enqueueTask에 전달된 콜백)이 실행됩니다.

setTimeout이나 setImmediate를 사용하면 어떨까요? React 코드는 브라우저 환경에서 setTimeout 또는 setImmediate 사용을 피하고 싶다고 암시합니다. 왜냐하면 항상 정확하지 않고 제한, 테스트 환경 또는 기타 최적화(예: 테스트 환경의 가짜 타이머)의 영향을 받을 수 있기 때문입니다. React는 특히 비동기 렌더링 및 업데이트와 관련하여 스케줄링을 세밀하게 제어하기를 원합니다.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에 사용되는 고급 코드베이스 아키텍처 개념을 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배, 모범 사례를 배우고 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo(별표를 주세요!)

코드베이스 아키텍처를 기반으로 한 고급 과정을 통해 팀의 기술을 향상하세요. 자세한 내용은 hello@thinkthroo.com으로 문의하세요!

참고자료:

• https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L42

위 내용은 React 소스 코드의 MessageChannel 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!