react project case summary

When I first started writing components, it didn’t feel too difficult (similar to vue). The most interesting thing should be jsx syntax. Personally, I feel that jsx is indeed more functional than vue's template, and more readable.

// vue
<p :id="text" :class="{&#39;active&#39;:isActive}" v-text="&#39;hello! &#39; + msg"></p>

// jsx
<p id={text} className={isActive && &#39;active&#39;}>hello !{msg}</p>

1. There are no instructions in jsx, and {} in jsx represents the js statement to be executed. Its effect is similar to return, and it will have a return value. In this case, it is better to understand the content of jsx. The dom in jsx is not The real dom is just a syntax for expressing dom. The content in {} can be completely understood as js, and the entire jsx can be understood as an html template written in native js.

2. For the attribute calculation part, you need to add : in front of the attribute name in vue, but not in jsx.

3. In addition, in The contentText of the dom in vue is not rendered using {{}}, because before the vue page is generated, the template syntax part is not rendered, and it will appear on the page first{{content}}, and then it flashes into the real text content.

Another example of array traversal rendering

// vue
<ul>
  <li v-for="(item,index) in list" :key="index" v-if="showItem(item)">
    <span v-text="item.label"></span>
  </li>
</ul>

// vue的methods属性
methods:{
  showItem(item){
    return item.label.indexOf('abc') !== -1
  }
}

// jsx
<ul>
  {list.map((item,index) => {
    return item.label.indexOf('abc') !== -1 && (
      <li key={index}>
        <span>{item.label}</span>
      </li>
    )
  })}
</ul>

You will I found that when it comes to some relatively simple rendering requirements, using vue's template will be simpler, more direct, and easy to understand. But if it involves some more complex logic processing and rendering, jsx is more intuitive, because the syntax of jsx is not much different from that of js. It is equivalent to using js to describe how to render the dom structure. Of course, jsx does not mean that you can use the syntax of js to write dom. {} can only be an expression, so like if else or switch This syntax cannot be used in {}.

Regarding the formatting of component templates, it feels better in react, because The react component is written in js. The formatting and annotation parts are better supported in the editor, but the .vue file cannot currently find the formatting plug-in for it.
Currently I have encountered There are two problems.

1. The problem of component comments.
When writing components, I am more accustomed to writing comments. In js files, comments will be more obvious and convenient, but in vue The comments in the file feel less friendly.

// .vue
<template>
<!--
  这里是注释,而且没有高亮效果.
 -->
</template>

// .js
/**
 * @name
 * @param {Number}
 * @description
 */

The comments in js will look very high-end.

2. Partial formatting of dom.
Vue recommends that every dom Each attribute occupies one line (also my writing habit), like this:

// .vue
<p
  id="box1"
  class="classA classB"
  :class="{&#39;active&#39;:isActive}"
></p>

However, as soon as it is formatted,...

// .vue
<p id="box1" class="classA classB" :class="{&#39;active&#39;:isActive}"></p>

This does not happen in jsx , as long as the line is changed, the above problem will not occur even if it is formatted.

Related recommendations:

Several advanced methods of decomposing React components

Analysis of new features of React 16.3

Detailed explanation of Context API of React 16.3

The above is the detailed content of react project case summary. For more information, please follow other related articles on the PHP Chinese website!