ReactDOM.render Serial rendering link (1)

stonehehehehehe 2021-02-23 10:28:33
reactdom.render reactdom render serial rendering

Learn what you can learn ?

  • React 16 Is it asynchronous rendering in all cases ?
  • Fiber In the architecture “ interruptible ”“ recoverable ” How to achieve it ?
  • Fiber Trees and traditional virtual DOM What's the difference between trees ?
  • How is priority scheduling implemented ?

ReactDOM.render The call stack

ReactDOM.render The call stack can be roughly divided into the following three stages :

  • Initialization phase
  • render Stage
  • commit Stage

Initialization phase

complete Fiber The creation of basic entities in the tree , What is it Fiber, What does it do , What is the basic entity ?

Fiber What is it? ?

Fiber It's right React Reconstruction of the core algorithm .

Fiber The role of ?
  • Break down interruptible work into small tasks
  • Prioritize the work in progress 、 redo 、 Reuse
  • Switch between parent and child tasks , To support the React Layout refresh during execution
  • Support render Return multiple elements
What is the basic entity ?

Basic technology entities want to get to know him , Take a look at the source code

function legacyRenderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback) {
// container It corresponds to the reality we pass in DOM object
var root = container._reactRootContainer;
// initialization fiberRoot object
var fiberRoot;
// DOM The object itself doesn't exist _reactRootContainer attribute , therefore root It's empty
if (!root) {
// if root It's empty , Then initialize _reactRootContainer, And assign its value to root
root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
// legacyCreateRootFromDOMContainer The created object will have a _internalRoot attribute , Assign it to fiberRoot
fiberRoot = root._internalRoot;
// What we're dealing with here is ReactDOM.render The callback function in the input parameter , You can understand
if (typeof callback === 'function') {
var originalCallback = callback;
callback = function () {
var instance = getPublicRootInstance(fiberRoot);;
} // Initial mount should not be batched.
// Get into unbatchedUpdates Method
unbatchedUpdates(function () {
updateContainer(children, fiberRoot, parentComponent, callback);
} else {
// else The logic deals with non first rendering situations ( That is, update ), The logic is to skip initialization , Basically the same as upstairs
fiberRoot = root._internalRoot;
if (typeof callback === 'function') {
var _originalCallback = callback;
callback = function () {
var instance = getPublicRootInstance(fiberRoot);;
} // Update
updateContainer(children, fiberRoot, parentComponent, callback);
return getPublicRootInstance(fiberRoot);

In this source code, the main operation is assignment fiberRoot object , This object is through root._internalRoot assignment , In essence, this object is a FiberRootNode object , There is one current object , This object is FiberNode example . and FiberNode, It is Fiber The object type corresponding to the node .current Object is a Fiber node , More Than This , It's still the current Fiber The head node of the tree . among ,fiberRoot The associated objects are real DOM The container node of ; and rootFiber As virtual DOM The root node of . These two nodes , It's going to be the next whole tree Fiber The starting point of tree building .

The whole initialization process is for the follow-up render Stage preparation . Now? , our Fiber Tree It's still in the starting state with only the root node . Next , We are about to enter the most critical render Go in the middle of the stage , Let's take a look at how this tree opens its branches and leaves !

render Stage

scheduleUpdateOnFiber Method is used to schedule updates , In by ReactDOM.render The first screen rendering initiated in this scene , What it triggers is performSyncWorkOnRoot.performSyncWorkOnRoot It's just what we've repeatedly stressed render Stage ;finishSyncRoot Mark the render The end of the method . In the process , It's been interspersed with a lot of beginWork、completeWork call ( These two methods in series is a process of simulating recursion ). These two methods are render Work content of .

stay React15 Mediation is a recursive process . stay Fiber Under the architecture , Although it doesn't rely on recursion , however ReactDOM.render In mode , It's a synchronous process as a whole , It's a priority depth traversal . In the process beginWork Is responsible for creating Fiber node ,completeWork Responsible for Fiber Nodes are mapped to real DOM.

Let's take a look at the more important calls to this process

performSyncWorkOnRoot: Start render Stage

renderRootSync: preparation

prepareFreshStack: Reset a new stack environment

The more important thing here is to call createWorkInProgress This function , Let's see what this function does


workLoopSync: adopt while Circle and judge workInProgress Is it empty , And execute on it if it is not empty performUnitOfWork function .

performUnitOfWork: Trigger pair beginWork Call to .performUnitOfWork, Its main work is “ By calling beginWork, To achieve new Fiber Node creation ”; It also has a secondary job , It's the new one Fiber The value of the node is updated to workInProgress Go to variables .

beginWork: establish Fiber node

beginWork The core logic is based on fiber node (workInProgress) Of tag Property differences , Call different nodes to create functions . stay beginWork There's a lot of logic behind it , Interested students can dig deep , Here's a picture from the Internet :

Fiber How do nodes connect

Different Fiber Between nodes , Will pass through child、return、sibling this 3 Establish a relationship between two attributes , among child、return It records the parent-child relationship , and sibling It records the sibling relationship .FiberNode In the example ,return Point to the present Fiber Parent of node , and sibling It points to the second 1 Brother nodes .


The next chapter continues to share ReactDOM.render Tandem rendering Links
Thank you for Xiuyan 《 In simple terms, it's done React》

  1. How to build a high performance front end intelligent reasoning engine
  2. How to become a professional front end engineer in 2021?
  3. How to transform single / micro service application into serverless application
  4. How to transform single / micro service application into serverless application
  5. How to transform single / micro service application into serverless application
  6. How to connect the ground gas to the micro front end?
  7. How to connect the ground gas to the micro front end?
  8. How to connect the ground gas to the micro front end?
  9. Vue server rendering principle analysis and introduction
  10. Realize the correct loading of text message
  11. Building my own project scaffolding with yeoman
  12. JavaScript advanced prototype and prototype chain
  13. React background management front end system (based on open source framework development) start
  14. JS practical skills breakpoint debugging
  15. I'd like to share with you 20 super easy-to-use Chrome extension plug-ins
  16. Get page element location
  17. Use the powerful API of modern browser to record any interface in the browser and realize export, save and management
  18. Delayed code execution in flutter
  19. Reconfiguration experience of KOA middleware system
  20. Add comments to your blog
  21. Svg editor -- new path
  22. Detailed explanation of debounce and throttle of JavaScript function
  23. Anti shake and throttling and corresponding react hooks package
  24. C2m: the first CSDN article moved to MOOC script 5000 words, detailed painstaking development process, there are renderings and source code at the end of the article
  25. Front end, school recruitment, Taobao, guide
  26. [vue2 & G6] get started quickly
  27. Canvas from the beginning to the pig
  28. Take five minutes to standardize the code comments?
  29. Some thoughts on sass
  30. what?! You haven't filled in the award information yet
  31. How to get the interface + tsdoc needed by TS through swagger
  32. Binary tree
  33. Canvas drawing method in Web screenshot
  34. Front end docker image volume optimization (node + nginx / node + multi-stage construction)
  35. Become a big influence of technology? Coding pages quickly build personal blog
  36. Object and array deconstruction, spread operator, rest operator
  37. Analysis of Axios source code
  38. Two ways to delete useless code in project (Practical)
  39. Edit your picture with canvas
  40. Today's chat: 2-4 years to walk out of the resignation dilemma and comfort zone
  41. JS mechanism 3: stack, heap, garbage collection
  42. [grid compression evaluation] meshquan, meshopt, Draco
  43. Deep understanding of Vue modifier sync [Vue sync modifier example]
  44. WebView for front end engineers
  45. React form source code reading notes
  46. Deep thinking about modern package manager -- why do I recommend pnpm instead of NPM / yarn?
  47. On the sequence of event capture and event bubbling
  48. Help you build a systematic understanding of the front end scaffolding
  49. commander.js Principle analysis
  50. Common usage of nginx
  51. H5 jump to wechat app
  52. Front end algorithm interview must brush questions series [14]
  53. Thinking of cross end practice
  54. Vue server rendering principle analysis and introduction
  55. [KT] vscode plug in development example series (2)
  56. Design ideas of react and Vue framework
  57. JavaScript String.prototype.replaceAll 兼容性导致的问题
  58. JavaScript String.prototype.replaceAll Problems caused by compatibility
  59. 爱奇艺体育:体验Serverless极致扩缩容,资源利用率提升40%
  60. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%