search

7kms / react-illustration-series

图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.
http://7km.top/
GNU Affero General Public License v3.0
7.5k stars 804 forks source link

一个对于workLoop伪代码的阅读优化 #45

Closed thomas-void0 closed 2 years ago

thomas-void0 commented 2 years ago

我再workLoop源码讲解这里遇到了一些问题，我通过阅读示例的伪代码发现。如下所示： image 红色部分的判断中缺少了对于暂停的判断，所以我对后面蓝色部分的代码产生了执行疑惑。通过对照源码我才发现while判读还有一部分条件。 image

所以我提出了一点小小的优化，在伪代码处将while循环的条件补齐。还有就是在此位置增加workLoop的源码链接。方便点击对照进行查看。

7kms commented 2 years ago

https://github.com/facebook/react/blob/12adaffef7105e2714f82651ea51936c563fe15c/packages/scheduler/src/Scheduler.js#L167-L178

主要是考虑到其中!(enableSchedulerDebugging && isSchedulerPaused)是属于开启调试过程才会执行, 所以正常运行时他必然为true, 所以当初在分析源码时为了简洁没有加上.

7kms commented 2 years ago

真正对于暂停的判定应该是下面的if中(!hasTimeRemaining || shouldYieldToHost())

https://github.com/facebook/react/blob/12adaffef7105e2714f82651ea51936c563fe15c/packages/scheduler/src/Scheduler.js#L167-L178

if (
      currentTask.expirationTime > currentTime &&
      (!hasTimeRemaining || shouldYieldToHost())
    ) {
      // This currentTask hasn't expired, and we've reached the deadline.
      break;
    }

你看一下是不是这个原理

thomas-void0 commented 2 years ago

真正对于暂停的判定应该是下面的if中(!hasTimeRemaining || shouldYieldToHost())

https://github.com/facebook/react/blob/12adaffef7105e2714f82651ea51936c563fe15c/packages/scheduler/src/Scheduler.js#L167-L178

if (
      currentTask.expirationTime > currentTime &&
      (!hasTimeRemaining || shouldYieldToHost())
    ) {
      // This currentTask hasn't expired, and we've reached the deadline.
      break;
    }

你看一下是不是这个原理

感谢你的回复，确实是这样。之前看的还是不够仔细。打扰了😄