if you follow the logic of recursion, inst.render (), will be called every time, but the render method inside class is written at the beginning, does it render the same return value every time? For example:
class Demo extends React.Component {
constructor(...args) {
super(...args);
}
render() {
return <div>
<span>123</span>
<span>12345</span>
</div>
}
}
Why do you need to call mountComponent, recursively? didn"t you already call render inside class to render it all from the very beginning? Is it rendered by createElement as follows, for example, the second recursion of div, is span for render,. Thank you
React.createElement(
"div", // type,,DOMString
null,
React.createElement("span", null, "123"), // children
React.createElement("span", null, "12345"),
)
the following is part of the source code. The react version is 15.6.0 , git reset-- hard 911603b :
// statelessrenderReactElement
if (renderedElement === undefined) {
renderedElement = this._renderValidatedComponent();
}
_renderValidatedComponent: function () {
var renderedComponent;
ReactCurrentOwner.current = this;
try {
renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext();
} finally {
ReactCurrentOwner.current = null;
}
return renderedComponent;
},
_renderValidatedComponentWithoutOwnerOrContext: function () {
var inst = this._instance;
// renderReactElementJSXbabelcreateElement()
var renderedComponent = inst.render();
return renderedComponent;
},
this._renderedComponent = this._instantiateReactComponent(renderedElement);
//
var markup = ReactReconciler.mountComponent(this._renderedComponent, transaction, nativeParent, nativeContainerInfo, this._processChildContext(context));