11
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Riot.jsのLifecycle

Posted at

ドキュメントに記載の通りだけどReactみたいにマウント時のイベントがいくつかあります。

書き方はonもしくはoneで記載することができます。

todo.tag
<script>
this.on('mount', () => {

});
</script>

before-mount

タグがマウントされる直前に一度だけ呼ばれます。
タグの初期化処理などはここで書くようになると思います。

mount

タグがマウントされた直後に一度だけ呼ばれます。

update

タグが更新される直前に呼ばれます。
これは値が更新される度に呼ばれることになります。
場合によりけりですが何度もupdateが呼び出されると不都合がでる場合があります。そういうときはoneを使うことで呼び出しを
1度だけにすることができます。

todo.tag
this.one('update', () => {
	
});

updated

タグが更新された直後に呼ばれます。
updateと同じように更新される度に呼ばれます。

before-unmount

タグのマウントが解除される直前に呼ばれます。
後処理などはここで書くことができそうです。

unmount

タグのマウントが解除された直後に呼ばれます。

入れ子のカスタムタグのマウント

基本的には親タグが読み込まれたときい子タグも同時にマウントされます。

app.js
import 'app' from './app.tag'
import 'header' from './header.tag';
import 'todo' from './todo.tag';

riot.mount('app');
app.tag
<app>
	<header></header>
	<todo></todo>
</app>

予めimportで読み込んでおく必要はありますがこれで子タグのマウント処理も行うことは可能になってくると思います。

11
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?