Vue, Applets, Angular, React are all mVVVM-like frameworks. In the View layer of the framework, they are often developed in a way coupled with THML tags to implement data and logical synchronization operations. React uses JSX instead of templates, while the first three use template syntax.

What is template syntax

Template is a literal meaning, is a template, it needs to specify its own instruction set, and then the developer through semantic instruction set development, and finally with the template engine to parse the template, and finally generate the required results. Examples include the {{}} syntax in art-template and the <%= %> syntax in WebpackHtmlPlugin in Webpack.

How does a template engine work

<template>
</template>
<style lang="css" >
</style>
<script>
</script>
Copy the code

Take Vue as an example, vue-loader is a template parsing engine of Vue. During the construction of Webpack, a SFC will be translated into a parsing chain first, because Vue has three templates and provides the ability to parse separately

// code returned from the main loader for 'source.vue' // import the <template> block import render from 'source.vue? vue&type=template' // import the <script> block import script from 'source.vue? vue&type=script' export * from 'source.vue? vue&type=script' // import <style> blocks import 'source.vue? vue&type=style&index=1' script.render = render export default scriptCopy the code

Then it’s processed to extend each parse chain like source.vue? Vue&type = the template into a vue – loader /! template-loader! vue-loader! source.vue? Vue&type =template then goes through the layers of loader processing as webpack processes the link and becomes a render function

Another example is art-template, which is a static template and then renders the template using a parsing engine + data, but this is much simpler than Vue.

Template syntax features:

  • Static: can’t be mixed with JS, even in the vue instruction set some can do some simple calculations, but only the author supports part of THE JS syntax when parsing
  • Use directives instead of logic, such as wx:if wx-for vue in applets, V-if in Vue, and ngFor in Angular all use directives to describe JS logic
  • You must carry a parsing engine to translate into code that JS can recognize

Why is JSX not a template syntax

JSX is very distinctive

  1. It is ubiquitous and can be mixed with any JS code.
  2. No instruction set is required and can be treated as a value type
  3. Without a parsing engine, Babel can compile any JSX expression directly intoReact.createElement(ele, props, ... child)

So JSX is the react. createElement syntax. If you don’t like JSX, you can use the react. createElement syntax.

< div > nihao < / div > is equivalent to / * # __PURE__ * / React. The createElement method (" div ", null, "nihao"); Function Component({name}) {return <div>{name}</div>}< div><Component name="1212" /> </div> is equivalent to function Component(_ref) { var name = _ref.name; return /*#__PURE__*/React.createElement("div", null, name); } /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/React.createElement(Component, { name: "1212" }), " ");Copy the code

JSX syntax is very loose and tag names can even be set dynamically

Example 1 let List = {ListItem: Component}; < list. ListItem></ list. ListItem> Example 2 let Unit = true? List.ListItem : Component; <Unit ></Unit>Copy the code

Because of the function, any part of it can be an expression, as long as the result of running the expression meets the criteria.

This is why JSX can probe the syntax of upper and lower limits of code.