Javascript React プログラミング

仮想DOM React.js 時計を作る【React.js入門#3】

 

みやちゃ

 

皆さんこんにちは、みやちゃです!

物理とプログラミングについて解説しています!

こちらの記事で、Railsのアプリケーション開発からRspecのテスト、herokuにデプロイまで解説しています!

今回は、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>

12行目の「setInterval()」関数について説明します。

setInterval()関数は、指定した時間ごとに、処理を繰り返し行うことができます。

今回は、

・第一引数に「showClock」関数

・第二引数に「1000」

を指定しています。

showClock関数は、後にfunctionで定義しています。

第二引数の1000というのは、「1000ミリ秒(1秒)ごとに」という意味です。

ブラウザで確認してみましょう。

現在の時刻が表示されているのと、ちゃんと毎秒更新されているのがわかると思います。

まとめ

いかがでしたでしょうか?

今回は、仮想DOMについて解説しました!

 

みやちゃ

 

ここまでご覧いただきありがとうございます!

© 2024 とあるエンジニアの備忘録ブログ Powered by AFFINGER5