This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

What is the JSX

JavaScript + XML = JSX

Is an HTML-in-javascript syntax that is neither string nor HTML. It is an extension of JavaScript syntax

With JSX, JavaScript is used in React to declare elements (the smallest unit that makes up the React application) that describe the user’s page

It is recommended that JSX be used with React to describe what the UI should look like. JSX may remind you of a template language, but it has all the functionality of JavaScript. JSX generates React “elements” that can be rendered into the DOM

Why use JSX in Vue

(You might wonder if React is better than JSX in Vue.)

To a statement

First of all, this article does not advocate using JSX as the mainstream for Vue development, giving up the advantages of SFC

Vue recommends using templates to create your HTML in most cases

The article # front-end Development, why I support templates and not JSX.

The authors point to several reasons:

  • The need for JSX is often found in substandard designs
  • Additional consideration is given to JSX compilation into the virtual DOM
  • View and Model are bidirectionally bound through ViewModel, but JSX is more template-oriented and logically detached
  • Performance: The excessive flexibility of JSX makes it difficult to optimize during compilation
    • Supplement: Vue 3.x, in terms of compilation optimization: rewrote diff algorithm, compilation generated Block tree, performance has been improved more

The auxiliary role

A coin has two sides. JSX has obvious disadvantages, but relatively speaking, it also has certain advantages

Let’s start with a requirements scenario: choose one of several components to render based on judgment (based on Vue 2.x)

Make the following choices:

  • Template template

    • If there are several conditions, there are several conditions. It could be v-if => V-else -if =>… => v-else, template is long, slightly bulky

    • Based on the above, separate each component into a.vue file and use dynamic components. Template is simplified, but the component references are too much

    • If none of the subcomponents are too complex to be pulled out and are not reusable (assuming the service is required for this purpose), then the need to pull out is considered

  • Render function

    • Even if the structure is relatively simple, the render function writing method also becomes complex, not intuitive, poor readability

     return h("div", [
       h(
         "el-button",
         {
           props: { plain: true },
           style: { marginRight: "10px"}},"Hello World")]);Copy the code
    • More condition judgment, a large amount of code, write up more painful, give up decisively

  • JSX

    • The Template and Render scenarios are not suitable, try writing a widget using JSX in the Components option
    components: {
    demoChild: {
        props：{/ /... },
        render() {
            const events = { on: { click: (e) = > console.log(e) } };
            return (
              <div>
                <el-button plain style="{margin-right: 10px}">
                  Hello World
                </el-button>
                <el-button type="info" {. events} >
                  Hello JSX
                </el-button>
              </div>); }}}Copy the code

    JSX is written similarly to the template template.

    • Improved readability, avoiding cumbersome templates

    • Reduces component introductions and avoids unnecessary pull-out

Therefore, IN my opinion, JSX has high flexibility and can be used as an auxiliary means in Vue development to a certain extent

case

In the development of element-UI component library, more intuitive use of JSX include submenu, Avatar, and so on

Submenu source code such as:

/ / no template
<script>
  / /...
  render(h) {
    const popupMenu = (
      <transition name={menuTransitionName}>
        <div>...</div>
      </transition>
    );
    const inlineMenu = (
      <el-collapse-transition>
        <ul>...</ul>
      </el-collapse-transition>
    );

    return (
      <li>
        <div
          class="el-submenu__title"
          ref="submenu-title"
          on-click={this.handleClick}
          on-mouseenter={this.handleTitleMouseenter}
          on-mouseleave={this.handleTitleMouseleave}
          style={[paddingStyle, titleStyle, { backgroundColor }]}
        >
          {$slots.title}
          <i class={["el-submenu__icon-arrow", submenuTitleIcon]} ></i>
        </div>
        {this.isMenuPopup ? popupMenu : inlineMenu}
      </li>
    );
  }
</script>
Copy the code

Link portal

# Reactjs – Introduce JSX

# Front-end development, why DO I support templates and not JSX?

Arrogance is the biggest obstacle to technological advancement

# Github – element

Last but not least

If there is anything wrong, please give me your advice