反応プロジェクト事例の概要

初めてコンポーネントを書き始めたときは、それほど難しくは感じませんでした (Vue と同様)。最も興味深いのは、jsx 構文です。個人的には、jsx は vue のテンプレートよりも機能的で読みやすいと感じています。

// 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. jsx には命令がなく、jsx /code には {} は実行される js ステートメントを表します。その効果は戻り値を持つ <code>return と似ています。この場合、jsx の dom はそうではありません。本物の dom ですが、dom を表現する単なる A 構文であるため、{} の内容は完全に js として理解でき、jsx 全体はネイティブ js で書かれた html テンプレートとして理解できます。{} 代表要执行的js语句,它的效果类似 return ,它会有返回值.这样的话,更好理解jsx的内容,jsx里面的dom不是真正的dom,只是一种表示dom的语法,{}里面的内容可以完全理解为js,这种整个jsx就可以完成理解为原生js写的html模版.

2. 属性计算的部分,vue里面需要在属性名前面加:,在jsx里面则不需要.

3. 另外,在vue里面的dom的contentText不使用{{}}来渲染,使用因为在vue页面生成之前,模版语法部分没有渲染出来,就会在页面上先出现{{content}},再一闪变成真正的文本内容.

再举个数组遍历渲染的栗子

// 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>

你会发现,在一些比较简单渲染需求时,使用vue的template会比较简单直接,而且很易懂.但是如果涉及一些比较复杂的逻辑处理渲染,jsx更直观,因为jsx的语法跟js的差异不大,相当于用js来描述需要如何渲染dom结构.当然jsx并不是说可以完成使用js的语法来写dom,{}里面只能是一个表达式,所以像if else或者switch这种语法在{}是不能用的.

关于组件模版的格式化,在react里面感觉更好一点,因为react组件就是用js写的,格式化和注释部分在编辑器得到更好的支持,但是.vue

コンポーネント テンプレートの書式設定に関しては、react の方が良いと思います。コンポーネントは js で記述され、フォーマットされ、注釈が付けられます。一部の部分はエディターでより適切にサポートされていますが、.vue ファイルのフォーマット プラグインがまだ見つかりません

コンポーネントを書くときは、js ファイルの方がコメントがわかりやすくて便利ですが、vue ファイルのコメントは親しみにくいように感じます。 js 内のコメントは非常にエレガントです。

2. dom 部分をフォーマットします。

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

いくつかの高度なメソッドReactコンポーネントの分解方法

React 16.3の新機能分析

以上が反応プロジェクト事例の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。