Riot.js의 함정 요약

이 기사의 속편이라고 할까, v2.x 밖에 써 있지 않았기 때문에, 이번은 v3.x 를 위한 기사입니다.
v4의 개발이 수면 아래에서 숙련되고 있으며, 지금 갱감도 있습니다만, v4 릴리스 되었다고 해서 곧바로 프로덕션으로 도입한다고는 생각되지 않고, 또 v3.x의 수요도 있다 라고 생각하므로, 써 갑니다. (이하이 기사에서는 Riot.js를 riot라고합니다)

1. 이벤트가 발화되면, 이벤트 발화한 현재의 태그만 갱신된다

사용자의 조작에 수반해 데이터의 변경이 행해졌을 때, 화면상에도 그 변경을 반영하지 않으면 안됩니다만, riot라고 하면, 이하와 같이 update() 메소드를 명시적으로 발화시킬 필요가 있습니다 . 아래 예제를 살펴보십시오. ( 데모 )

app.tag

<app>

  <!-- ここのテキストは変わらない -->
  <p show="{ show_flg }" class="text">hogehoge</p>
  <p hide="{ show_flg }" class="text">fugafuga</p>

  <child on-toggle="{ toggle }" />

  <script>
    this.show_flg = false

    toggle() {
       this.show_flg = !this.show_flg
    }
  </script>
</app>

child.tag

<child>
  <button onclick="{ opts.onToggle }">toggle</button>

  <script>
    this.on('update', () => {
       console.log('updated in child tag.')
    })
  </script>
</child>

이 예에서 toggle 메서드는 app 태그에 정의되어 있지만 button 태그와 클릭 이벤트는 <child>라는 하위 태그에 정의되어 있으므로이 버튼을 클릭해도 child ) 태그 안에서만 갱신 처리가 실행됩니다. 따라서 텍스트는 계속 fugafuga 남아 있습니다.
app 태그를 업데이트하려면 다음과 같이 명시적으로 update()를 실행해야 합니다.

app.tag (업데이트)

toggle() {
   this.show_flg = !this.show_flg
+  this.update()
}

2. 속성 이름이 자동으로 소문자로 변환됨

속성의 이름에 카멜 케이스를 사용하고 있는 경우, 그 이름은 모두 소문자로 변환됩니다.
아래 코드 예제를 살펴보십시오.

app.tag

<app>
  <child showDetail={ hoge } />

  const self = this
  self.hoge = 'fuga'

</app>

<child>
  <h2>{ opts.showDetail }</h2>

  console.info(opts)  //=> Object {showdetail: "fuga"}

</child>

위와 같이 opts 의 내용을 보면 showdetail 와 D 의 문자가 소문자로 변환되어 버립니다.

이것은 브라우저의 사양으로 자동으로 변환되는 것이므로, 이것을 회피하는 방법은 카멜 케이스를 사용하지 않는 것입니다. (3. 다음)

※ 이쪽은 공식 문서에도 기재되어 있습니다.

3. 속성명이 자동으로 로어 캬멜 케이스로 변환된다

2. 의 경우와 같지만 이번에는 하이픈( - ) 을 사용하면 자동으로 로어 낙타 케이스로 변환되는 패턴입니다.

app.tag

<app>
  <child show-detail={ hoge } />

  const self = this
  self.hoge = 'fuga'

</app>

<child>
  <h2>{ opts.show-detail }</h2>

  console.info(opts)  //=> Object {showDetail: "fuga"}

</child>

보신대로입니다. 이 해결 방법은 속성 이름을 뱀 케이스로 만드는 것이 더 빠릅니다. 언더바의 경우에는 아무것도 변환되지 않습니다. 또는 나누어 로워 캬멜 케이스로 취급하는 것도 있네요.

4. select, table, svg 등의 태그의 자식 요소로 riot 태그를 설치할 수 없다

이쪽도 공식 문서 에 기재가 있습니다만, 예를 들어, select 태그의 아이 요소에는 option 태그 밖에 설치할 수 없는 사양이 되어 있으므로, 이하와 같은 쓰는 방법이면, 마운트 되지 않습니다.

tag(오류)

<select>
  <my-options />
</select>

정확하게는 다음과 같이 씁니다.

tag(올바른)

<select data-is='my-options'></select>

끝에

공식 문서도 조금씩 갱신이 들어가 있기 때문에, 오랜만에 보면 대답이 쓰여 있을지도 모릅니다. 또한 Riot.js 는, 처음으로 JavaScript의 라이브러리나 프레임워크에 접한다고 하는 사람에게는 알기 쉬운 것이므로, 한 번 만져 보거나, 정도의 때의 선택지로서 충분하다고 생각합니다. 그 후, Vue.js나 React에 가는 것도 학습의 흐름으로서는 좋은 것이 아닐까라고 생각합니다.

또 뭔가 발견되면 수시로 갱신합니다!