Why is JSX syntax so popular?

Preface

Nowadays, although access JSX The framework of grammar （React、Vue） More and more , But there is no doubt that the deepest fate is still React.2013 year , When React With JSX When Hengkong was born , The community used to JSX There has been a lot of controversy , But now , More and more people are facing JSX Say the last sentence “ It's delicious ”！ Typical “ It's delicious ” series .

JSX What is it? ？

according to React Official explanation ,JSX It's a JavaScript Grammar extension of , Similar to template syntax , Or something like XML Of ECMAScript Grammar extension , And have JavaScript All the functions of .

There are two key points in this explanation ：

• 「JavaScript Grammar extension 」
• 「 Have JavaScript All the functions of 」

JSX The location is JavaScript Of 「 Grammar extension 」, instead of “ A version ”, This determines that the browser will not be like natural support JavaScript As support JSX . This raises a question “JSX How is the JavaScript In effect ？”

JSX How grammar works in JavaScript In effect ？

React

stay React In the frame ,JSX How is the grammar of JavaScript In effect ？React The explanation given on the official website is ,JSX Will be compiled as React.createElement(), React.createElement() Will return a message called “React Element” Of JS object .

about JSX Is compiled by Babel To complete .

Babel It's a tool chain , It's mainly used to use ECMAScript 2015+ Syntax written code into backward compatible JavaScript grammar , To be able to run in current and older browsers or other environments .

Of course Babel Also have the ability to JSX Convert to JS The ability of , Take an example ： On the left is us React The syntax written in the development , And it contains a paragraph JSX Code . after Babel After the transformation , It's all about JS Code .

In fact, if you look carefully , Find out JSX More like a grammar sugar , It is described in a way similar to template syntax , Describe function objects . Actually in React Is not mandatory in JSX grammar , We can also use React.createElement function , For example, using React.createElement Function to write such a piece of code .

class Test extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      React.createElement(
        "div",
        null,
        "Hello, ",
        this.props.test
      ),
      React.createElement("div", null, "Today is a fine day.")
    );
  }
}

ReactDOM.render(
  React.createElement(Test, {
    test: "baixiaobai"
  }),
  document.getElementById("root")
);

Copy

When using JSX after , This code will be written like this ：

class Test extends React.Component {
  render() {
    return (
    	<div>
            <div>Hello, {this.props.test}</div> 
            <div>Today is a fine day.</div>
    	</div>
    );
  }
}
ReactDOM.render(
  <Test test="baixiaobai" />,
  document.getElementById('root')
);

Copy

Through comparison, we found that , On the premise that the actual function effect is consistent ,JSX The code is hierarchical 、 The nesting relationship is clear ; and React.createElement The code gives a very confusing “ Hybridity ”, Such code is not only unfriendly to read , It's hard to write .

JSX The code written by syntax is more concise , And the code structure is more clear .

JSX Syntax sugar allows us developers to write like HTML To write our JS Code . It not only reduces the learning cost, but also improves our R & D efficiency and R & D experience .

Vue

Of course. Vue The framework is no exception JSX grammar , although Vue The default recommended template is still .

Why default recommended template syntax , Quote a paragraph Vue The original words of the official website are as follows ：

Any standard HTML It's all legal Vue Templates , This also brings some unique advantages ：

• For a lot of people who are used to HTML For the developers , Template is better than JSX It's more natural to read and write . There is, of course, an element of subjective preference , But if this difference leads to an increase in development efficiency , Then it has objective value .
• be based on HTML Make the existing application migrate to Vue It's easier .
• It also makes it easier for designers and new developers to understand and participate in projects .
• You can even use other template preprocessors , such as Pug To write Vue The template of .

Some developers think templates mean learning extra DSL (Domain-Specific Language Domain specific language ) To develop —— We think the difference is superficial . First ,JSX It's not that there's no learning cost —— It is based on JS An extra set of grammars on top of . meanwhile , Just as familiar with JS People learn JSX It's going to be as easy as , be familiar with HTML People learn Vue The template syntax is also very easy . Last ,DSL We can let developers do more with less code , such as v-on All kinds of modifiers for , stay JSX It takes a lot more code to implement the corresponding function in .

More abstract , We can divide components into two categories ： One is the partial view (presentational), One is partial logic (logical). We recommend using templates in the former , In the latter use JSX Or render functions . The proportion of these two types of components will vary according to the application type , But on the whole, we find that the components of presentation class are far more than those of logic class .

For example, there is a template syntax .

<anchored-heading :level="1">
  <span>Hello</span> world!
</anchored-heading>

Copy

Use JSX The grammar will be written like this .

render: function (h) {
  return (
    <AnchoredHeading level={1}>
      <span>Hello</span> world!
    </AnchoredHeading>
  )
}

Copy

Convert to createElement The conversion JS That's how it became .

createElement(
  'anchored-heading', {
    props: {
      level: 1
    }
  }, [
    createElement('span', 'Hello'),
    ' world!'
  ]
);

Copy

But whether it's template syntax or JSX grammar , Will not get the browser's natural support , These grammars will eventually be compiled into corresponding h function （createElement function , Not all versions , There are differences in different versions ） Finally become JS object , The compilation here is also the same as React The same thing Babel plug-in unit To complete .

Whether it's React Highly esteems JSX grammar , still Vue Default template syntax , Purpose To make our code more concise , And the code interface level is more clear . It not only reduces the learning cost, but also improves our R & D efficiency and R & D experience .

Read here , I believe you have fully understood “JSX yes JavaScript A grammatical extension of , It's very close to the template language , And have JavaScript All the functions of . ” The meaning behind this definition .

Whether it's React still Vue We all mentioned a function createElement, This function is to put our JSX It maps to DOM Of .