Thank you. For quick reference, I will put related materials here for anyone who is interested in this topic:

hkjpotato commented 3 years ago

React fiber algorithm link: TBA
Fre algorithm link: TBA
Vue3 algorithm link: https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/renderer.ts#L2365
Vue2 algorithm link: TBA
Inferno (Vue3 is similar to it): https://github.com/infernojs/inferno/blob/5dedf9d4fc67f7a6d9c3d6cc27e7c21ccc707197/packages/inferno/src/core/implementation.ts#L318 (not sure)

related explanation

Originally posted by @hkjpotato in https://github.com/yisar/fre/discussions/259#discussioncomment-650952

hkjpotato commented 2 years ago

// https://v8.dev/blog/elements-kinds#avoid-creating-holes https://github.com/facebook/react/blame/main/packages/react-reconciler/src/ReactFiberLane.new.js#L556 https://github.com/facebook/react/pull/20071/files

hkjpotato commented 2 years ago

https://stackoverflow.com/questions/5349425/whats-the-fastest-way-to-loop-through-an-array-in-javascript

hkjpotato commented 2 years ago

https://twitter.com/dan_abramov/status/1120971795425832961?lang=en

I probably misunderstood the relationship between react16/17/18 terms: fiber, time slice, sync and async, concurrent, scheduling, priority.

hkjpotato commented 2 years ago

https://segmentfault.com/a/1190000041268486

before 16: recursive sync , 16: linkedlist while sync original priority : expirationTime, bug of batch and priority "0.0.0-experimental-5faf377df", published over a year ago by acdlite npm@andrewclark.io

newer: lane "0.0.0-experimental-3d0895557", *react-18.9.9( published a year ago by gaearon dan.abramov@gmail.com

// This is the entry point for synchronous tasks that don't go through Scheduler 
function performSyncWorkOnRoot {
   ...
   do workLoopSync
}

function workLoopSync() {
  // Already timed out, so perform work without checking if we need to yield.
  while (workInProgress !== null) {
    workInProgress = performUnitOfWork(workInProgress);
  }
}

// This is the entry point for every concurrent task, i.e. anything that
// goes through Scheduler.
function performConcurrentWorkOnRoot(root, didTimeout) {
   ...

function workLoopConcurrent() {
  // Perform work until Scheduler asks us to yield
  while (workInProgress !== null && !shouldYield()) {
    workInProgress = performUnitOfWork(workInProgress);
  }
}

TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary

hkjpotato commented 2 years ago

https://github.com/facebook/react/issues/19804 better explanation

hkjpotato commented 2 years ago

这些用词你不去看过往版本的comments根本不知道在讲啥子一会asyncmode一会concurrent一会time slice一会resumable。直到现在我还是不是很确定commiting to dom那一步能不能“分片”。我有一种感觉。react16和15的default是一样的区别在于一个是硬跑完一个while loop，可能15就是传统recursion吧

hkjpotato commented 2 years ago

基本上onchange这种还是会以workLoopSync执行，不理会scheduler不知道yield，最后会call commit 但是在这个过程中遇到defferred，由于defferred会再次触发一次内部setState，则，这一次的更新是属于concurrent的

hkjpotato / tiny-react

Thank you. For quick reference, I will put related materials here for anyone who is interested in this topic: #1