JavaScript의 queueMicroTask

이 글에서는 React 소스 코드의 queueMicroTask 함수를 분석합니다

React는 ReactAct.js라는 파일에서 queueMicroTask를 사용합니다. 이것은 공개 API입니다.

act는 어설션을 하기 전에 보류 중인 React 업데이트를 적용하는 테스트 도우미입니다.

await act(async actFn)

ReactAct.js에는 코드가 많습니다. 우선 queueMicroTask에 초점을 맞춰보겠습니다.

ReactAct.js에서 queueMicroTask는 어디에 호출되나요?

queueSeveralMicrotasks는 이 ReactAct.js 파일 끝에 있으며 콜백으로 queueMicroTask를 호출하고 그 목적을 설명하는 자세한 설명이 있습니다.

queueSeveralMicrotasks는 다음 두 곳에서 호출되는 것으로 나타났습니다.

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L121

// Warn if the an `act` call with an async scope is not awaited. In a
 // future release, consider making this an error.
 queueSeveralMicrotasks(() => {
   if (!didAwaitActCall && !didWarnNoAwaitAct) {
     didWarnNoAwaitAct = true;
     console.error(
       'You called act(async () => …) without await. ' +
       'This could lead to unexpected testing behaviour, ' +
       'interleaving multiple act calls and mixing their ' +
       'scopes. ' +
       'You should - await act(async () => …);',
     );
   }
 });

• https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L196

// Warn if something suspends but the `act` call is not awaited.
// In a future release, consider making this an error.
if (queue.length !== 0) {
 queueSeveralMicrotasks(() => {
 if (!didAwaitActCall && !didWarnNoAwaitAct) {
   didWarnNoAwaitAct = true;
   console.error(
     'A component suspended inside an `act` scope, but the ' +
     '`act` call was not awaited. When testing React ' +
     'components that depend on asynchronous data, you must ' +
     'await the result:\n\n' +
     'await act(() => …)',
   );
   }
 });
}

queueMicroTask가 어떻게 사용되는지 살펴보았으니 이제 queueMicroTask의 정의를 알아보겠습니다.

queueMicroTask

Window 인터페이스의 queueMicrotask() 메서드는 제어가 브라우저의 이벤트 루프로 돌아가기 전에 안전한 시간에 실행되도록 마이크로태스크를 대기열에 넣습니다.

마이크로태스크는 현재 작업이 작업을 완료한 후 실행 컨텍스트 제어가 브라우저의 이벤트 루프로 반환되기 전에 실행을 기다리는 다른 코드가 없을 때 실행되는 짧은 함수입니다.

이렇게 하면 대기 중인 다른 잠재적으로 더 높은 우선순위의 코드를 방해하지 않고 코드를 실행할 수 있지만, 완료해야 하는 작업에 따라 브라우저가 실행 컨텍스트에 대한 제어권을 다시 획득하기 전에 가능합니다.

MDN Docs에서 queueMicroTask에 대해 자세히 알아보세요.

예:

다음은 마이크로태스크와 매크로태스크가 브라우저 실행과 어떻게 상호작용하는지 보여주는 예입니다.

console.log('Synchronous 1'); // 1
Promise.resolve().then(() => {
 console.log('Microtask 1'); // 3
});
console.log('Synchronous 2'); // 2
setTimeout(() => {
 console.log('Macrotask 1'); // 5
}, 0);
console.log('Synchronous 3'); // 4

분류:

동기 코드가 먼저 실행되어 다음을 출력합니다.

'동기1'

'동기2'

'동기3'

브라우저가 보류 중인 렌더링이나 매크로 작업을 처리하기 전에 마이크로 작업 대기열이 처리됩니다.

Promise.resolve().then(…) 콜백은 마이크로태스크 대기열에 추가되고 동기 코드 블록이 완료된 직후 실행되어 로깅됩니다.

'마이크로태스크 1'

마이크로태스크 대기열이 비워진 후 브라우저는 제어권을 다시 획득하고 다음을 수행할 수 있습니다.

다음을 기록하는 setTimeout 콜백과 같은 매크로 작업을 실행합니다.

'매크로태스크 1'

최종 출력

Synchronous 1
Synchronous 2
Synchronous 3
Microtask 1
Macrotask 1

회사 소개:

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

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

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

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

참고자료:

1. https://developer.mozilla.org/en-US/docs/Web/API/Window/queueMicrotask

2. https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/react/src/ReactAct.js#L361

3. https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide

4. https://react.dev/reference/react/act

5. https://javascript.info/event-loop

위 내용은 JavaScript의 queueMicroTask의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!