반응 프로젝트 사례 요약

小云云원래의: 2018-02-10 15:32:513297검색

처음 컴포넌트 작성을 시작했을 때는 별로 어렵게 느껴지지 않았습니다(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>

jsx에는 명령어가 없고 {}는 실행될 js 문을 나타냅니다. 그 효과는 반환 값을 갖는 <code>return과 유사합니다. 이 경우 jsx의 내용을 이해하는 것이 좋습니다. . jsx의 dom은 실제 dom이 아니라 dom을 표현하는 A 구문일 뿐이며, {}의 내용은 완전히 js로 이해될 수 있으며, jsx 전체는 html 템플릿으로 이해될 수 있습니다. {} 代表要执行的js语句,它的效果类似 return ,它会有返回值.这样的话,更好理解jsx的内容,jsx里面的dom不是真正的dom,只是一种表示dom的语法,{}里面的内容可以完全理解为js,这种整个jsx就可以完成理解为原生js写的html模版.
属性计算的部分,vue里面需要在属性名前面加:,在jsx里面则不需要.
另外,在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

속성 계산 부분적으로 vue에서는 속성 이름 앞에 :를 추가해야 하지만 jsx에서는 그렇지 않습니다.

또한 vue에 있는 dom의 contentText는 {{}}를 사용하여 렌더링하지 않습니다. vue 페이지가 생성되기 전에 템플릿 구문 부분이 렌더링되지 않기 때문입니다. >{{content}}가 먼저 페이지에 표시됩니다. 그런 다음 실제 텍스트 콘텐츠로 깜박입니다.

배열 순회 렌더링의 또 다른 예

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

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

당신 상대적으로 간단한 렌더링 요구 사항에 대해 vue를 사용할 때 템플릿은 비교적 간단하고 직접적이며 이해하기 쉽습니다. 그러나 좀 더 복잡한 논리 처리 및 렌더링이 포함된 경우 jsx의 구문이 더 직관적이지 않습니다. 이는 js를 사용하여 dom 구조를 렌더링하는 방법을 설명하는 것과 같습니다. 물론 jsx가 js 구문을 사용하여 {}만 작성할 수 있다는 의미는 아닙니다. if else 또는 switch code>와 같은 표현식이어야 합니다. 이 구문은 {}에서 사용할 수 없습니다.

구성 요소 템플릿 형식과 관련하여. , 반응 구성 요소가 js로 작성되고 서식이 지정되고 주석이 달렸기 때문에 반응이 더 좋습니다. 일부 부분은 편집기에서 더 잘 지원되지만 .vue 파일에 대한 서식 지정 플러그인을 아직 찾을 수 없습니다.

현재 2가지 문제가 발생했습니다.

1. 컴포넌트 댓글 질문

컴포넌트를 작성할 때, js 파일에서는 댓글이 더 명확하고 편리해지겠지만, vue 파일의 댓글은 덜 느껴집니다.

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

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

이렇게 하면 js의 주석이 매우 우아해 보입니다.

2. dom 부분의 형식을 지정합니다. vue에서는 dom의 각 속성을 한 줄에 표시하는 것을 권장합니다(이것이 저의 글쓰기 습관이기도 합니다). 이렇게: rrreee

하지만 포맷하자마자...

rrreeejsx에서는 이런 일이 발생하지 않습니다. 줄만 바뀌면 포맷해도 위의 문제는 발생하지 않습니다.

반응 프로젝트 사례 요약

관련 기사