React Internals Deep Dive 2 - How React does initial mount?

preview_player
Показать описание
In Overview of React internals we briefly mentioned that React uses internal tree-like structure(Fiber Tree) to calculate the minimum DOM manipulation and execute them in Commit phase. In this post, we’ll figure out how exactly React does the initial mount (first-time render).

Рекомендации по теме
Комментарии
Автор

Hey, thanks so much for this hard work. It really helps!! I have a clarification question:

During the render phase we traverse the tree in a Depth First Search method (which I think happens when renderRootSync() is called with that do while loop). As we visit each node "on the way down" the tree we call beginWork(). Once we visit the first leaf of the tree we do some work and call completeUnitOfWork(). In our case the first leaf we visit is the <a> tag where we create the anchor link of the HostComponet. "On the way up" the tree completeUnitOfWork() is done for each node until the entire tree is committed. Do I have it right?

Also, just for fun, how would this process look like if we used Breath First Search instead of Depth? Would it be any less efficient? I thought about it and I'm not sure.

skammernet