There is a template rendering syntax called JSX, which is a JavaScript syntax extension that is being standardized by the industry. . JSX is actually derived from a front-end framework called React. In react, in addition to JSX we know, which part of the rendering process of JSX in React takes effect and what steps the rendering process goes through. This article provides an overview based on these points.

Advice before introduction

1. The react. Render tree. Xmind. Some functions can be downloaded for positioning. Some function code is deep and has partial dependencies, which is a good choice for context correlation.

2. The author is based on version 17 of React — github.com/facebook/re…

React functions can be used in directories 2 and 3.

React uses some Object property methods

React provides common methods

React commonly used nouns

JSX briefly

For example:

ReactDOM.render(
<div>
<h1>Hello, world!</h1>
<p>React to Render</p>
</div>
,
document.getElementById('root'));Copy the code

This completes the page rendering simply. This experience:

1. JSX is packaged into JS syntax via Babel (@babel/ helper-Builder-react-jsx-experimental)

React Executes the render function to iterate over nodes and bind events

If you take the code above and perform the Babel conversion, you get jscode that executes as follows:

ReactDOM.render( 
    /*#__PURE__*/
    React.createElement("div".null./*#__PURE__*/
    React.createElement("h1".null."Hello, world!"),
    /*#__PURE__*/ 
    React.createElement("p".null."React to Render")), 
    document.getElementById('root'));Copy the code

Attached is an online JSX conversion address: babeljs.io/repl/

For preset syntax, look for dependencies in @babel/preset- React. The specific implementation is in @babel/helper-builder-react-jsx-experimental, @babel/helper-plugin-utils

The author only briefly associated the context, here is a screenshot:

We’ll see the “_source”,”jsxFileName” keywords in the webpack packaged code.

@babel/helper-plugin-utils also serves another purpose: The dev environment outputs the location of the file code block during the packaging process for debugging location. The processing returns a read-only attribute “__source” containing {fileName:path, lineNumber:number, columnNumber:number}.

Hence, JSX syntax is not associated with the rendered execution code, react is processed and executed via Babel conversion to native JS. CreateElement after the transformation is the create node.

Create a node

The entry code to create the node is in the “react/ SRC/react. Js “createElement function

CreateElement refers to a different creation function depending on the current environment

However, the development and production versions are only the difference between validation and error output. You end up creating the same Element object, the virtual node

As shown below:

In the error message on the right side of the figure above

“Filename,lineNumber” : @babel/helper-plugin-utils injects object properties in advance during packaging

When performing the real create Node “ReactElement js/createElement method”, this will generate a Node object with some tag attributes:

Apply colours to a drawing

Rendering can be functionally divided into three points for preparation, execution, and submission.

Render function in the “/ react – dom/SRC/client/ReactDOMLegacy js”, after a series of checks judgment will eventually perform rendering under legacyRenderSubtreeIntoContainer function

LegacyRenderSubtreeIntoContainer function performs the following three steps:

Code screenshot:

We go down in three steps:

1- Preparation stage:

Do two things:

1. Create ReactRoot, fiberRoot, and (HostRoot)fiberNode associated with the root node

2. Define the default browser event for the root node

In the figure below, this is the associated object of the root node

The associated object has the following properties and functions

As shown below, the default event is defined:

The preparation phase is summarized as follows:

2 – Implementation stage:

Code entry in “the react – the reconciler/SRC/ReactFiberReconciler. Js” unbatchedUpdates function

This stage generates a tree for all nodes and waits for submission

As shown below:

3 – Submission Stage:

The commit phase code is “react – the reconciler/SRC/ReactFiberReconciler. Js” unbatchedUpdates function is carried out

Specific function performs in “the react – the reconciler/SRC/ReactFiberWorkLoop. New. Js” commitRoot performSyncWorkOnRoot function execution

Perform actual Dom operations, part periodic functions

As shown below:

Finally in commitBeforeMutationEffects and submit commitMutationEffects real dom manipulation and events

After the whole rendering process is completed in the submission stage, the page can be seen, and the rest of the action is to do some data synchronization, reset the marking time, etc..

Original author: Chen Bisong

Without consent, prohibit reprint!

For more exciting content, please pay attention to Tencent VTeam technical team wechat public account and video number