Talking about a new idea for applying the applet to support JSX syntax

React The community has been exploring the use of React syntax development applet, which is more famous for Taro , nanachi . Use React The difficulty of grammar development applet is mainly in JSX syntax, JSX is inherently JS , compared to small The program static template is too flexible. The new idea mentioned in this article is to process the new ideas of JSX syntax. This is a more dynamic handling idea, which basically does not limit any jsx than existing programs. Let you handle a small program in a real React method, I hope this new idea can be inspired by people who have interested in React develop applets.

The limitations of the existing ideas

Before introducing new ideas, let’s look at

Taro (latest version 1.3)

, Nanachi How is it in a small program end processing JSX syntax. Simply, mainly by converting JSX into an equivalent applet WXML in the compilation phase React code to run in the small program end. For example,


logical expression:

XX &&
will be converted to equivalent applet wx: IF instructions:

    This way, the processing of  JSX 
is mainly placed in the compilation phase, and he relies on information collection in the compilation phase,For example, it must identify logical expressions and then do the corresponding WX: IF
conversion processing.

What is the problem and limitations in the compilation phase? We will show:

Class App Extend.Component {render () {const a =


const b = a return (
  First we declare  const a =  hello  , then  A 
assigns the value to B
, we will see the latest version

TARO 1.3 , as shown below: This example is not particularly complicated, but it is wrong. To understand why the above code is wrong, we must first understand the compilation phase. In essence, in the compilation phase, the code is actually the ‘string’, and the compile stage processing scheme needs to analyze the necessary information from this ‘string’ (through AST , regular, etc.) Do the corresponding equivalent conversion processing.

What is equivalent to doing what is needed? We need to analyze 浅谈一种让小程序支持JSX语法的新思路 B




b = a = Hello

, then

{B} in {B} is equivalent to Hello . However, in the compilation phase, it is difficult to determine the value of B . Some people say that can be traced to determine the value of B, nor can it be, butConsider the value of A , how is the value of A , how is the value of A is determined? Need to determine A in B can be accessed A , however A may be assigned by other variables, loop reciprocating, once Not simple assignment, such as function call, three yuan judgment, etc., the retrospective declaration failed, if a itself is a variable on the global object, the trace is more impossible to talk. So, the value of B cannot be determined in the compilation phase. Let’s take a closer look at the error information of the above picture: a is not defined .

Why is a

undefined? This is related to another problem, we know


, in fact, equivalent to

React.createElement (Text, Null, ‘Hello’) 浅谈一种让小程序支持JSX语法的新思路, and


method is a general js object, the shape is like // ReactElement object {tag: text, props : Null, Children: 'Hello' ...} So, when the code is true when JS environment is really running, it is about to equivening :

 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 the compilation phase needs to be equivalent to do

JSX , you need to convert JSX

wxml , so
JSX is specially handled,

is no longer a general JS object, here we see a The variable is even lost, it has exposed a very serious problem: the code semantics are destroyed, that is, because the compile time scheme is for JSX special processing, the code semantics on the applet is truly running. Not your expectation. This is a more headache. Due to compile time, there is a constraint, often let you have “I still write” when I use React "This feeling. Let's introduce a brand new handling idea, this idea is not different from the real React during the small program, does not change any code semantics, jsx

The expression will only be processed as

React.createElement method to call, the actual operation is normal JS

object, and ultimately renders a small program view in other ways. Below we carefully explain the specific content of this idea.

Step 1: Give each independent JSX

clip to hit the unique identifier

UUID , assuming that we have the followingCode: Const a = Hello const y =


clip adds
UUID attribute
  Step 2: Put  React  The code can be identified by  Babel , for example  JSX  segment is equivalent  React.createElement 
Replacement, etc.

const a = react.createElement (text, {uuid: “000001”}, “hello”); Three steps: Extract each independent JSX

, encapsulate with a small program

template , generate wxml file Hello


The unique identifier of Name is identified here, and the unique identifier of the JSX clip UUID

is the same. Finally, it is necessary to generate a placeholder mode at the end:
.   Step 4: Modify  Regeneration of ReactDom.Render  (After React 16.x , the  UUID  attribute of the  UUID  attribute is not in the recursive method, the recursive implementation phase, the polymerization  jsx  attribute, generated and returned  uides  data structure. 
Step 5: Put the fourth step

, pass to the small program environment, the small program set uides to the placeholder template Rendering the final view. We will explain the entire process with examples of app components above, first JS code will be essential:

Class App Extends React.comPonent {render () {const a = react.createElement (text, {uuid: “000001”}, “hello”); const b = a return (React.createElement (View, {uuid: “000002”}, b);)}} Simultaneous generate wxml file: Hello

After using us

Render , Render (, Parent) . In the recursive process of

, in addition to the regular creating component instanceIn addition to the life cycle, the UUID
 ID of the components during the execution process will be collected, and finally generate  UIDES  object 

const Uides = {name: "000002", child0001: {name: 000001, ...} ...}

Approach acquisition
 UIDES  Set to the placeholder template   . Finally rendering a small program view.    In this whole process, all of your  JS  code is running in  React Process , the semantics are completely  JSX  The fragment will not be handled by any special processing, just simple 
React.createElement call, and due to
React process

only pure JS The execution is very rapid, usually only a few MS. Finally output a UIDES data to the applet, the applet is rendered by this UIDES . Now we are watching the previous assignment const b = a , there will be no problem, because a

is just a normal object. In addition, for common compilation timers, such as any function returns
JSX segment, dynamically generated
 JSX  fragment,  for 
cyclic use jsx
Fragment, etc., you can completely release, because

JSX clip is just JS object, you can do anything, eventually reactDom.render collects all execution resultsThe


identifier of the clip, generates 浅谈一种让小程序支持JSX语法的新思路 UIDES

, and the small program will render the final view according to this

UIDES data structure. It can be seen that this new idea is still very different from the previous compilation scheme, and the processing of JSX fragment is dynamic, you can be anywhere, any function Any JSX clip appears, the final execution result determines which segment rendering, only the clip of the execution result UUID will be written UIDES . This is the difference between this and the static identification of the compile time. Conclusion "Talk is Cheap. SHOW ME Your Code!" This is just a thinking? Or already have a complete implementation?

is a complete implementation, the Alita project is in processing

JSX , it is this idea, which is the reason why Alita is basically unlimited but transforming the entire React Native project. Although Alita has made a lot of optimizations on this idea. If you are interested in this idea, you can go to study the Alita source code, it is completely open source Of course, you can also construct your React applet development program based on this idea. The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment