React18 마이크로태스크 일괄 처리 문제

Question

useEffect(()=>{console.log("render");});consthandleClick=()=>{setC1((c)=>c+1);Promise.resolve().then(()=> {setC1((c)=>c+1);});};conshandleClick2=()=>{Promise.resolve().then

P粉642920522 · Answer

이러한 호출 순서가 어떻게 다른지, 그리고 관찰된 동작이 어떻게 가능한지 설명하겠습니다.

React가 내부적으로 어떻게 상태를 일괄적으로 업데이트하는지 정확히 말씀드릴 수는 없지만, 저는 단지 React가 React를 사용하는 개발자와 관련이 없고 React 내부에 대한 깊은 지식이 필요하며 심지어 한 버전에서 다른 버전으로 변경하는 복잡한 최적화가 있다고 가정하고 있습니다. (자유롭게 정정해주세요.)

차이

Promise.resolve() 安排一个新的微任务，实际上相当于 window.queueMicrotask().

setState 기능 (아마도) 은 또한 새로운 마이크로 작업을 예약합니다. 따라서 해당 콜백(Promise 和 setStatePromise 및

)은 동일한 실행 단계에서 호출됩니다.

이 두 변형의 차이점은

handleClickA 中，在两个 updater 函数之间调用 setState2 훅에
handleClickB 中，两个 updater

샘플 코드

호출 순서를 더 잘 설명하기 위해 코드를 약간 다시 작성했습니다.

으아악

통화 순서 지침

여기서는 호출 순서를 설명합니다.

(FIFO

>):

handleClickA

：

으아악 handleClickB

：

으아악

개인 해석

updater저는 React가 현재 대기열에 있는 모든

함수를 일괄 처리하려고 시도한다고 가정합니다.

즉, 업데이터 함수만 호출될 때마다 함께 일괄 처리하고 최종 상태를 한 번만 업데이트해 보세요.

그러나 새로운

함수가 호출되면 React는 다음 setStateupdater 함수를 호출하기 전에 현재 업데이트 루프를 완료하고 새로운 렌더링 주기를 시작할 수 있습니다. 代码>왜 이런 일이 일어나는지는 추측만 할 수 있습니다

새

setState새로운
setStateReact 사람들은 여전히 최고의 최적화 전략과 그 절충안을 연구하고 있습니다.
(...아니면 버그입니다.)