Each component in React has a UI representation that we can call from the view or template returned from the Render **** method. Here is the template for our ClickCounter **** component:

<button key="1" onClick={this.onClick}>Update counter</button>
<span key="2">{this.state.count}</span>
Copy the code

React Elements

After the template passes through the JSX compiler, you’ll end up with a bunch of React elements. This is actually returned from the method of the Render ****React component, not HTML. Since we don’t need JSX, we can override the component’s Render **** method ClickCounter **** as follows:

class ClickCounter {...render() {
        return [
            React.createElement(
                'button',
                {
                    key: '1'.onClick: this.onClick
                },
                'Update counter'
            ),
            React.createElement(
                'span',
                {
                    key: '2'
                },
                this.state.count
            )
        ]
    }}
Copy the code

Calling render to the pair in the React. CreateElement method creates two data structures, as shown below:

[{$$typeof: Symbol(react.element),
        type: 'button'.key: "1".props: {
            children: 'Update counter'.onClick: () = >{... }}}, {$$typeof: Symbol(react.element),
        type: 'span'.key: "2".props: {
            children: 0}}]Copy the code

You can see React adding the $$Typeof **** attribute to these objects to uniquely identify them as React elements. Then, we have the element described by the attributes type, key **** and props ****. These values are taken from the content passed to the React. CreateElement function. Notice how React represents the text content as the children of the span **** and button **** nodes. And how the click handler becomes part of the Button **** element item. There are other fields on the React element, such as ref **** fields that are outside the scope of this article.

ClickCounter’s React element does not have any props or keys:

{
    $$typeof: Symbol(react.element),
    key: null.props: {},
    ref: null.type: ClickCounter
}
Copy the code

Fiber nodes

During Reconciliation, data for each React element returned from the Render method is merged into the Fiber Tree. Each React element has a corresponding Fiber node. Unlike React elements, Fiber is not recreated on every renderer. . These are mutable data structures that hold component state and the DOM.

As discussed earlier, the framework needs to perform different activities depending on the type of React element. In our sample application, ClickCounter calls the lifecycle and render methods for the class component, and DOM mutation for the SPAN host component (DOM node). Therefore, each React element is converted to the corresponding type of Fiber node, which describes the work that needs to be done.

You can think of Fiber as a data structure representing some work to be done or, in other words, a unit of work. Fiber’s architecture also provides a convenient way to track, schedule, pause, and abort work.

First converts elements React to a Fiber, React to use the data elements in createFiberFromTypeAndProps function created in optical Fiber. In subsequent updates, React reuses Fiber and only uses data from the corresponding React elements to update the necessary attributes. React elements with the same key are no longer returned from the Render method. React may also need to move or remove nodes in the hierarchy depending on the prop.

React creates a Fiber node for each React element, and since we have a tree of those elements, we will have a tree of Fiber nodes. In our sample application, it looks like this:

All fiber nodes are connected through a linked list using the following properties of fiber nodes:child.siblingandreturn.