13.0 Part 13 (clickable)
Well, through ReactReconciler.receiveComponent
React actually calls receiveComponent
from ReactDOMComponent
and pass next element there. Reassign it on DOM component instance and call update method. updateComponent
method actually performs two main actions: update DOM properties and DOM children, based on prev
and next
props. Good for us, we already analyzed _updateDOMProperties
(src\renderers\dom\shared\ReactDOMComponent.js#946
) method. As you remember, this method mostly process HTML elements properties and attributes, compute styles, handle event listeners etc. What is left, it’s _updateDOMChildren
(src\renderers\dom\shared\ReactDOMComponent.js#1076
).
Let’s recap how we got here. Let's look at the scheme one more time, then remove redundant less important pieces, and it becomes this:
13.1 Part 13 simplified (clickable)
And we should probably fix spaces and alignment as well:
13.2 Part 13 simplified & refactored (clickable)
Nice. In fact, that’s all that happens here. So, we can take the essential value from Part 13 and use it for the final updating
scheme:
13.3 Part 13 essential value (clickable)
And then we're done!