https://stackblitz.com/edit/js-ntqfil?file=index.js

    1. const a1 = {name: 'a1', child: null, sibling: null, return: null};
    2. const b1 = {name: 'b1', child: null, sibling: null, return: null};
    3. const b2 = {name: 'b2', child: null, sibling: null, return: null};
    4. const b3 = {name: 'b3', child: null, sibling: null, return: null};
    5. const c1 = {name: 'c1', child: null, sibling: null, return: null};
    6. const c2 = {name: 'c2', child: null, sibling: null, return: null};
    7. const d1 = {name: 'd1', child: null, sibling: null, return: null};
    8. const d2 = {name: 'd2', child: null, sibling: null, return: null};
    10. a1.child = b1;
    11. b1.sibling = b2;
    12. b2.sibling = b3;
    13. b2.child = c1;
    14. b3.child = c2;
    15. c1.child = d1;
    16. d1.sibling = d2;
    18. b1.return = b2.return = b3.return = a1;
    19. c1.return = b2;
    20. d1.return = d2.return = c1;
    21. c2.return = b3;
    23. let nextUnitOfWork = a1;
    24. workLoop();
    26. function workLoop() {
    27.     while (nextUnitOfWork !== null) {
    28.         nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
    29.     }
    30. }
    32. function performUnitOfWork(workInProgress) {
    33.     let next = beginWork(workInProgress);
    34.     if (next === null) {
    35.         next = completeUnitOfWork(workInProgress);
    36.     }
    37.     return next;
    38. }
    40. function beginWork(workInProgress) {
    41.     log('work performed for ' + workInProgress.name);
    42.     return workInProgress.child;
    43. }
    45. function completeUnitOfWork(workInProgress) {
    46.     while (true) {
    47.         let returnFiber = workInProgress.return;
    48.         let siblingFiber = workInProgress.sibling;
    50.         nextUnitOfWork = completeWork(workInProgress);
    52.         if (siblingFiber !== null) {
    53.             // If there is a sibling, return it 
    54.             // to perform work for this sibling
    55.             return siblingFiber;
    56.         } else if (returnFiber !== null) {
    57.             // If there's no more work in this returnFiber, 
    58.             // continue the loop to complete the returnFiber.
    59.             workInProgress = returnFiber;
    60.             continue;
    61.         } else {
    62.             // We've reached the root.
    63.             return null;
    64.         }
    65.     }
    66. }
    68. function completeWork(workInProgress) {
    69.     log('work completed for ' + workInProgress.name);
    70.     return null;
    71. }
    73. function log(message) {
    74.   let node = document.createElement('div');
    75.   node.textContent = message;
    76.   document.body.appendChild(node);
    77. }