What actually happens when the React component returns?

Question

I noticed a difference between the data before returning and after returning the component.

class AComponent extends Component { render() { const body = <BComponent crmStatus={...}/> debugger // log body on the right // ... render as static html to electron window return false } } class BComponent extends Component { render() { const resultRender = <article className='large'>...</article> debugger // log resultRender on the left return resultRender } } 

My previous question would be “ How to read the processed className component? ”, But I divided the questions, answering what was really happening and why, so that it really started to beat me, and could even give me tips for solving my problem.

So the question is:

What actually happens to the component and why is this so? I may have very complex logic in my render() function, but I think working with components is not so simple.

 const headerContact = isContactInCRM ? <p>..</p> : <div>..</div> const headerCallBtnsOrInfo = isSipEnabled && <div>..buttons..</div> const callTimer = callDuration && <span>{callDuration}</span> const footerNotes = <footer>..</footer> const someImportedComponent = <MyComponent /> const resultRender = <section> {headerContact} {headerCallBtnsOrInfo} {callTimer} {footerNotes} {someImportedComponent} </section> // there is a difference in data between headerContact and someImportedComponent // when traversing the resultRender tree in console 

Answer 1

Before answering the question, it is worth looking at what JSX is. It just provides syntactic sugar for the React.createElement(component, props, ...children) function.

 <div> <MyComponent/> </div> 

As an example above, the JSX snippet will be converted to the following JavaScript code during compilation.

 React.createElement( "div", null, React.createElement(MyComponent, null) ); 

You can try this using the Bubble online answer tool . Therefore, if we rewrite your sample code using regular JavaScript (after compiling JSX), it will be something like this.

 class AComponent extends Component { render() { const body = React.createElement(BComponent, { crmStatus: '...' }); debugger // log body on the right // ... render as static html to electron window return false } } class BComponent extends Component { render() { const resultRender = React.createElement('article',{ className: 'large' }, '...' ); debugger // log resultRender on the left return resultRender } } 

Looking at the code above, we can see that <BComponent crmStatus={...}/> does not create a new BComponent object or calls the render BComponent method. It just creates a ReactElement with type BComponent and crmStatus prop. So what is a ReactElement? ReactElement is a JavaScript object with some properties. I recommend that you read this post from the official React blog to get an in-depth understanding of the components, elements, and instances of React.

An element is a simple object that describes an instance of a component or DOM node and its required properties. It contains only information about the type of component (for example, a button), its properties (for example, its color) and any child elements inside it.

Basically, what you printed on the console are two React elements in different types. The left one describes a DOM node of type 'article' , and the right one describes a BComponent instance of type React. Therefore, you simply cannot expect that they will be the same.

Then, where does React instantiate the BComponent ? This actually happens inside React code. Usually we do not have access to these instances or to the fact that their rendering methods return in our application code.

However, React still provides an escape hatch called 'refs' in which you can explicitly access instances of child components. You may be able to use this approach to solve the original problem.

Hope this helps!