acdlite / react-fiber-architecture Goto Github PK

React Article

In this section, link to ReactPriorityLevel redirects to 404 page on Github.
This is the 404 link it is redirecting to: https://github.com/facebook/react/blob/main/src/renderers/shared/fiber/ReactPriorityLevel.js

I see that in the current implementation the priority is related to the lane algorithm.

https://github.com/luxp/react-fiber-architecture-cn

This relates to example 303, this should be rewritten per facebook/react#14326

In the doc:

In fact, when a fiber is created from an element, these two fields are copied over directly.

But I check the src code:

var createFiber = function(tag: TypeOfWork, key: null | string): Fiber {
  var fiber: Fiber = {
    // Instance

    tag: tag,

    key: key,

    type: null,

   ....
  }
}

So,key is from the caller which means it can be null or not,just decided by the caller,but type is null.So,I think "these two fields are copied over directly" is not correct.

And BTW,I know what the type is from the src code's description and react-devtools.But I am not sure what the key means.Does it is what we see in the react-devtools just like type?

The link referencing ReactPriorityLevel is broken. https://github.com/facebook/react/blob/master/src/renderers/shared/fiber/ReactPriorityLevel.js

Please can you let me know which file nor references these and I will be happy to create a PR to fix it.

I have had a look through the codebase and I have found the following files that contain priorities, although I'm not 100% sure what the new equivalent is to the old file.

https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactInternalTypes.js (line 41)
This contains the same var name as referenced ReactPriorityLevel, but it doesn't contain NoWork priority.

https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberExpirationTime.new.js
contains NoWork and others.

Anybody have any ideas?

This line is the only one I had to read multiple times (> 2) to understand it. Because it went against my intuition and I had to make sure I read that correctly.

With the exception of NoWork, which is 0, a larger number indicates a lower priority

Shouldn't a higher priority be represented by a higher number? The way it's currently proposed sounds more like a pendingWorkNiceness than a priority. I believe this will result in unnecessary mental overhead now and in the future. Every time someone touches code or reads about something related to priorities it causes this twist in the brain. For example the pseudo code "to check if a fiber's priority is at least as high as the given level" compares it with the given level using <= (read: smaller than or equal then the given). I believe someone implementing the code would first use >=, then run the tests and go "oh right, higher means lower", facepalms for second and goes on.

Given that NoWork is the lowest priority, so low that it will never be scheduled, has a value of 0 (and not +Infinity), makes it even more complicated.

I'm curious what led to this decision. Apart from that cheers for the concepts behind Fiber, sounds a lot like process scheduling on a CPU mixed with some dynamic programming ✌️.

We want to start a new project . We did POC for about a month on choice of frameworks. We chose React for building our application. So just wanted to know if you got an idea on when will facebook officially release React-fiber because we dont want to be doomed.

this repo has not updated for many years ,we hope the future sections is comming soon

excuse me？anyone knows where the sections are?

It looks like the ReactPriorityLevel module was removed as of this commit. It looks like at least the link in the pendingWorkPriority section should be updated to reflect that. Is there anything else in that section that should be removed?

Are there any published examples of a custom renderer to look at, using react-fiber ?

Would love if you could link/reference some of the core React teams's activity around fiber into this document. It'd make it easier to understand the actual implementation and current status.

You probably know this better, but I'm seeing the following items:

• https://github.com/reactjs/core-notes/blob/master/2016-06/june-23.md#update-on-fiber
• facebook/react#6170
• facebook/react#6690
• https://github.com/facebook/react/pulls?utf8=%E2%9C%93&q=is%3Apr%20%5Bfiber%5D

Cheers and thanks for putting this together!

I see that you describe reconciling as finding what changed and the render phase as to update the app itself
But I read somewhere else that reconciling is actually 2 phases
Render phase which async and here I think we find changes
And commit phase in which we apply those changes to the DOM
Now I'm so confused what is actually correct