I’m trying to conceptually understand how React exactly works through the Feynman technique — of trying to understand all the little basics and leaving no stone unturned, much like how a child would.
Anyway, I hope you’ll spare a few mins and pardon and entertain my naivety.
This is what I understand:
a component = a template with blanks.
It’s like an empty picture frame. Rendering a component = filling in the template’s blanks.
So you put a picture in the picture frame. Hopefully real art and not a cheap IKEA print. The data that goes into the blanks need to be gotten from somewhere. Rendering can happen at the server. So the server gets the data, fills in the blanks, and then sends over to the user’s browser the filled-in templates. Rendering can happen on the client end, where the server gives the client the blank templates and the data and tells it to put 1 and 1 together because the client is a big boy. Server-Side Rendering means that the server renders components in advance and gets them all assembled as a page to be sent to the user.
It’s like framing a bunch of pictures, mounting them on a wall in an orderly way, and then sending that whole wall to the customer. Client-Side Rendering means that the user’s browser needs to do the assembly, kinda IKEA-style. The user’s browser, or client, gets an empty page with a shopping list of components it needs to become the real boy webpage it dreams to be. So the client calls the server, and the server mails back unrendered components and data for the client to render and then assemble.
It’s like sending an empty wall with outlines of where certain framed pictures should go. Then the customer has to call up the store (server) and be like, yo, I need these X, Y, Z framed pictures. And the store mails the customer X, Y, Z picture frames and a stack of pictures for the customer to put together. Client renders the components with their data. Client assembles the rendered components via mounting The DOM is the actual wall that the customer sees. Mounting means hanging up a framed picture on the wall. Unmounting means taking a framed picture down. The virtual DOM tells the customer where on the wall (DOM) to hang the framed pictures. Or in other words, the Virtual DOM is what the DOM should ideally be.
Please correct misunderstandings. 🙂
Some questions I have:
Where do unused components live? Does the client only download components only when they’re needed?
So, does the store (server) send the customer every size and type of picture frame they have ‘just in case’ they need them? React rendering has nothing to do with Browser rendering (painting, compositing, etc.), right? React rendering is just about finding and putting {name} in <div>hello {name}</div>?
Thanks for taking the time to read. 🙂
submitted by /u/code_and_theory
[link] [comments]