みやちゃ
今回は、React.js入門の第3弾です！
仮想DOMについて解説します。
今回は
- 仮想DOM
- 時計を作る
この記事を読むと
仮想DOMについて理解することができます！
目次
仮想DOMとは
仮想DOM（Virtual DOM）とは、その時のDOMの状態を記憶しておいて、DOMの状態に変化があった時に、更新前と更新後を比較して、必要最低限の部分だけを更新して変化させるという機能です。
この機能によって、更新が最小限で済むので、パフォーマンスが大きく向上します。
時計を作る
それでは、仮想DOMを実際に利用して、毎秒動く時計を作ってみましょう。
以下のコードを見てください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
setInterval(showClock, 1000)
function showClock () {
const date = new Date()
const hour = date.getHours()
const min = date.getMinutes()
const sec = date.getSeconds()
const elem = <div>
{hour}:{min}:{sec}
</div>;
const root = document.getElementById("root")
ReactDOM.render(elem, root)
}
</script>
</body>
</html>１２行目の「setInterval()」関数について説明します。
setInterval()関数は、指定した時間ごとに、処理を繰り返し行うことができます。
今回は、
・第一引数に「showClock」関数
・第二引数に「1000」
を指定しています。
showClock関数は、後にfunctionで定義しています。
第二引数の1000というのは、「1000ミリ秒（１秒）ごとに」という意味です。
ブラウザで確認してみましょう。
現在の時刻が表示されているのと、ちゃんと毎秒更新されているのがわかると思います。
まとめ
いかがでしたでしょうか？
今回は、仮想DOMについて解説しました！
みやちゃ
ここまでご覧いただきありがとうございます！