I am watching Paul O Shannessy – Building React From Scratch
And i understand the mounting process very well but i have hard day trying to understand how React update a component and its children
The reconciler control the update process by this method:
function receiveComponent(component, element) {
let prevElement = component._currentElement;
if (prevElement === element) {
return;
}
component.receiveComponent(element);
}
Component.receiveComponent
receiveComponent(nextElement) {
this.updateComponent(this._currentElement, nextElement);
}
and this is the Component.updateComponent
method:
updateComponent(prevElement, nextElement) {
if (prevElement !== nextElement) {
// React would call componentWillReceiveProps here
}
// React would call componentWillUpdate here
// Update instance data
this._currentElement = nextElement;
this.props = nextElement.props;
this.state = this._pendingState;
this._pendingState = null;
let prevRenderedElement = this._renderedComponent._currentElement;
let nextRenderedElement = this.render();
if (shouldUpdateComponent(prevRenderedElement, nextRenderedElement)) {
Reconciler.receiveComponent(this._renderedComponent, nextRenderedElement);
}
}
This is the part of the code that updates the component after state change, and i assume that it should update the children too, but i can’t understand how this code achieves that, in the mounting process React instantate components to dive deeper in the tree but this doesn’t happen here, we need to find the first HTML element then we can change our strategy and update that HTML element in another place in the code, and i can’t find any way to find any HTML elements this way.
Finding the first HTML is the way to stop this endless recursion and logically this is what i expect from the code is to stop recursion the same way in the mounting process, but this demanded component instantiation so we can delegate to the reconciler that will discover that we are dealing with a wrapper instance of an HTML element not a wrapper instance of a custom component then we can start put thatb html element in the DOM..
This is the code repo on Github