React: 어떤 상황에서 unstable_shouldYield는 true를 반환합니까?

에 만든 2019년 02월 08일 · 4코멘트 · 출처: facebook/react

Scheduler.js에서

function unstable_shouldYield() {
  return (
    !currentDidTimeout &&
    ((firstCallbackNode !== null &&
      firstCallbackNode.expirationTime < currentExpirationTime) ||
      shouldYieldToHost())
  );
}

unstable_shouldYield ()는 currentDidTimeout이 false 일 때 true를 반환하고 shouldYieldToHost ()는 true를 반환하지만 그 이유는 무엇입니까?

shouldYieldToHost = function() {
  return frameDeadline <= getCurrentTime();
};

shouldYieldToHost () return true는이 유휴 기간에 남은 시간이 없음을 의미합니다.
currentDidTimeout이 false이면 일정이 시간 초과가 아님을 의미합니다.
그들 사이의 어떤 관계, 왜 unstable_shouldYield ()가 그들에게 의존합니까?

Question

출처

xilixjd

가장 유용한 댓글

사용자 입력을 포함하여 들어오는 이벤트를 검색 할 수 있도록 주기적으로 (16ms 정도) 호스트 환경에 양보합니다. frameDeadline 는 우리가 산출 할 계획 인 타임 스탬프 (원래 now() + 16ms 와 같은 값으로 설정 됨)이므로 shouldYieldToHost는 해당 시간이 지나면 true를 반환합니다. 그런 다음 requestIdleCallback과 requestAnimationFrame의 조합을 사용하여 곧 다음 작업을 처리 할 수 있습니다.

이상적인 경우에는 이러한 작은 16ms 슬라이스에서 모든 렌더링을 완료 할 수 있습니다. 그러나 동시에 다른 많은 일이 발생하면 React 작업이 "굶어 죽어"작은 조각으로 완전히 렌더링하지 못할 수 있습니다. 따라서 두 번째 확인이 있습니다. 대기중인 모든 렌더 또는 상태 업데이트에는 "만료 시간"(일반적으로 100ms에서 5000ms 사이)이 있습니다. 렌더링이 완료되지 않고 해당 시간이 지나면 해당 업데이트가 완료 될 때까지 동기 모드로 전환합니다. 이것은 이상적이지는 않지만 너무 오래 기다리지 않고 모든 업데이트가 처리되도록합니다.

동일한 만료 시간에 대해 브라우저에 타이머를 설정합니다 (예 : setTimeout 사용). 해당 타이머가 실행되면 작업을 동시에 수행해야한다는 것을 알고 있습니다. 이 경우 currentDidTimeout 가 true로 설정되므로 양보하지 않습니다.

향후에는 새로운 isInputPending 브라우저 API (https://github.com/WICG/is-input-pending)를 사용하여 작업을 계속 처리하고 새로운 사용자 입력이있을 때만 수익을 올릴 계획입니다. , 항상 16ms마다 양보하는 대신.

sophiebits 에 2019년 02월 09일

👍6

모든 4 댓글

sophiebits 에 2019년 02월 09일

👍6

답변 감사합니다
아직 몇 가지 질문이 있습니다.

unstable_shouldYield() 는 일정에서 작업이 중단 될 수 있는지 여부를 나타내는 것 같습니다. 맞습니까?
"16ms"가 activeFrameTime 합니까?
firstCallbackNode.expirationTime < currentExpirationTime 는 언제 true를 반환합니까? 다음 작업의 우선 순위가 이전 작업보다 높다는 의미입니까?

xilixjd 에 2019년 02월 10일

각 렌더링 작업은 unstable_shouldYield ()를 자주 확인해야합니다. (우리는 대략 트리의 각 구성 요소 다음에 호출합니다.) 대부분의 경우 false (계속 진행됨을 의미)를 반환하지만 true를 반환하면 렌더링을 일시 중지해야 함을 의미합니다.
예.
새롭고 우선 순위가 높은 작업이 기존 렌더링 중에 대기열에 추가되면 조건이 참이라고 생각합니다. 이 경우 해당 작업으로 전환 할 수 있도록 true를 반환하려고합니다.

sophiebits 에 2019년 02월 10일

👍2

정말 고마워요 정말 감사합니다!

xilixjd 에 2019년 02월 10일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React: 어떤 상황에서 unstable_shouldYield는 true를 반환합니까?

가장 유용한 댓글

모든 4 댓글

관련 문제