Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you how to make Mini Program support the relevant knowledge of JSX grammar. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

The limitations of existing ideas

Before introducing new ideas, let's take a look at Taro (the latest version 1.3) and how nanachi handles JSX syntax on Mini Program. To put it simply, the React code is run on the Mini Program side mainly by converting JSX into the equivalent Mini Program wxml during the compilation phase.

For example, for example, React logical expressions:

Xx & & Hello

Will be translated into the equivalent Mini Program wx:if directive:

Hello

In this way, the processing of JSX is mainly placed in the compilation phase, which depends on the information collection in the compilation phase. Taking the above as an example, it must identify the logical expression and then do the corresponding wx:if transformation processing.

What are the problems and limitations in the compilation phase? Let's use the following example to illustrate:

Class App extends React.Component {

Render () {

Const a = Hello

Const b = a

Return (

{b}

)

}

}

First we declare const a = Hello, and then assign a to b. Let's take a look at the conversion of the latest version of Taro 1.3, as shown below:

This example is not particularly complicated, but it is wrong.

To understand why the above code reported an error, we first need to understand the compilation phase. In essence, in the compilation phase, the code is actually a 'string', and the compilation phase processing scheme needs to analyze the necessary information from this' string'(through AST, regularization, etc.) and then do the corresponding equivalent conversion processing.

For the above example, what equivalent treatment needs to be done? We need to analyze at compile time that b is a JSX fragment: B = a = Hello, and then replace {b} in {b} with Hello. However, it is very difficult to determine the value of b in the compilation stage, and some people say that it is not impossible to determine the value of b backwards, but consider that since b = a, you have to determine the value of a first. how can you determine the value of this a? It is necessary to determine an in the scope chain that b can access, but a may be assigned from other variables, repeatedly, during which once there is not a simple assignment, such as function calls, ternary judgment and other run-time information, traceability will fail, and if an itself is a variable hanging on the global object, traceability is even more impossible.

Therefore, it is impossible to simply determine the value of b during the compilation phase.

Let's take a closer look at the error message in the picture above: an is not defined.

Why is a undefined? This involves another problem. We know that Hello is actually equivalent to React.createElement (Text, null, 'Hello'), and the return value of the React.createElement method is a normal JS object, as shown in

/ / ReactElement object

{

Tag: Text

Props: null

Children: 'Hello'

...

}

So when the above code actually runs in the JS environment, it is roughly equivalent to:

Class App extends React.Component {

Render () {

Const a = {

Tag: Text

Props: null

Children: 'Hello'

...

}

Const b = a

Return {

Tag: View

Props: null

Children: b

...

}

}

}

However, we just said that during the compilation phase, we need to equivalent JSX and convert JSX to wxml, so the JSX fragment of Hello is specially handled. An is no longer an ordinary js object. Here we see that the a variable is even missing. A serious problem is exposed here: the code semantics are broken, that is to say, due to the special handling of JSX by the compile-time scheme. The semantics of the code that really runs on Mini Program is not what you expect. This is a headache.

New ideas

Because compile-time solutions, like the above limitations, often make you have "am I still writing React?" when using it. This feeling.

Next we introduce a new processing idea, this idea is almost no different from the real React when Mini Program is running, and will not change any code semantics. JSX expressions will only be treated as React.createElement method calls, the actual run time is ordinary js objects, and finally render the Mini Program view in other ways. Let's explain the details of this idea in detail.

Step 1: put a unique identification uuid on each individual JSX fragment, assuming we have the following code:

Const a = Hello

Const y =

We add uuid attributes to fragments an and y.

Step 2: escape the React code into code that Mini Program can recognize through babel, such as replacing JSX fragments with equivalent React.createElement

Const a = React.createElement (Text, {

Uuid: "000001"

}, "Hello")

Step 3: extract each independent JSX fragment and wrap it in Mini Program template to generate a wxml file

Hello

Notice that the name identity of each template is the same as the unique identity uuid of the JSX fragment. Finally, you need to generate a placeholder template at the end:.

Step 4: modify the recursive process of ReactDOM.render (after React 16.x, it is no longer recursive), recursive execution phase, aggregate the uuid attributes of JSX fragments, generate and return uiDes data structures.

Step 5: transfer the uiDes generated in step 4 to the Mini Program environment, and Mini Program sets the uiDes to the placeholder template to render the final view.

We use the example of the App component above to illustrate the whole process. First, the js code is escaped as follows:

Class App extends React.Component {

Render () {

Const a = React.createElement (Text, {uuid: "000001"}, "Hello")

Const b = a

Return (

React.createElement (View, {uuid: "000002"}, b)

)

}

}

Generate the wxml file at the same time:

Hello

Use render to execute ReactDOM.render (, parent) after our customization. In the recursive process of render, in addition to the regular creation of component instances and the execution of the life cycle, it also collects the uuid identity of the components during execution, and finally generates the uiDes object.

Const uiDes = {

Name: "000002"

Child0001: {

Name: 000001

...

}

...

}

Mini Program gets the uiDes and sets it to the placeholder template. Finally render the Mini Program view.

In the whole process, all your JS code is running in the React process, semantically identical, JSX fragments will not be any special treatment, just a simple React.createElement call, and because the React process here is only a pure js operation, the execution is very fast, usually only a few ms. Eventually, an uiDes data is output to Mini Program, and Mini Program renders the view through this uiDes.

Now that we're looking at the previous assignment const b = a, there won't be any problem, because an is just a normal object. In addition, the common compile-time program restrictions, such as any function returns JSX fragments, dynamically generate JSX fragments, for cycle to use JSX fragments and so on, can be completely lifted, because JSX fragments are just js objects, you can do anything, and eventually ReactDOM.render will collect the uuid identity of all fragments of the implementation results to generate uiDes, while Mini Program will render the final view according to this uiDes data structure.

You can see that this new idea is very different from the previous compile-time scheme, the processing of JSX fragments is dynamic, you can appear any JSX fragments anywhere, any function, and the final execution result will determine which fragment to render, and only the uuid of the fragment that executes the result will be written to uiDes. This is essentially different from the static identification of compile-time schemes.

These are all the contents of the article "how to make Mini Program support JSX Grammar". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.