— web dev — 1 min read
Given this block of React codebase
const element = <h1 title="foo">Hello</h1>
const container = document.getElementById("root")
ReactDOM.render(element, container)
Step 1. Convert JSX to an object (using Babel and a method called React.creatElement).
The result is an object that looks like this
const element = {
type: "h1",
props: {
title: "foo",
children: "Hello",
},
}
Step 2. The element
object will then be passed to render
.
Step 3. The render method recursively creates DOM nodes for the element
and its children
.
1. The whole process will be done in multiple batches to avoid hogging the main thread. [https://github.com/facebook/react/issues/11171#issuecomment-417349573](https://github.com/facebook/react/issues/11171#issuecomment-417349573). (aka Concurrent mode)
2. The data structure behind the scene that stores all the "batches" is called a Fiber tree.
Step 4. Once the DOM tree is ready, it's committed to the real DOM. The Fiber tree will also be kept as a reference for the next step.
Step 5. On subsequent updates, steps 1 to 3 are repeated again, the new Fiber tree will then be compared with the existing Fiber (this process is called Reconciliation https://reactjs.org/docs/reconciliation.html), the differences will be committed to the DOM.