ReactApps

2019年3月3日

デジタル時計をつくる

a88oalwr6

はじめに

ローカル環境でこのサンプルを動かすには以下の手順に従ってください。

$ git close git@github.com:reiwa/reactapps.git
$ cd reactapps
$ yarn
$ yarn workspace time start

※ $の部分はペーストしないでください。

内容

毎秒更新される時・分・秒を表示する時計をつくります。
unsubscribe関数を呼び出すことを忘れないでください。破棄された存在しないコンポーネントを更新しようとしてエラーします。

コード

import React, { FunctionComponent, useEffect, useState } from 'react'
import { interval } from 'rxjs'

const App: FunctionComponent = () => {
  const [date, setDate] = useState(new Date())

  useEffect(() => {
    const subscription = interval(1000).subscribe(() => {
      setDate(new Date())
    })
    return () => {
      subscription.unsubscribe()
    }
  }, [])

  return (
    <p>{`${date.getHours()} : ${date.getMinutes()} : ${date.getSeconds()}`}</p>
  )
}

export default App

いくつかポイント

処理を定期的に発生させる為にrxjsinterval関数を用いています。

import { interval } from 'rxjs'

コンポーネントの状態としてdateを定義し、Observableを用いて毎秒更新します。コンポーネントにはライフサイクルが存在するので、コンポーネントが破棄される時にそのSubscriptionを解除しなければいけません。

const [date, setDate] = useState(new Date())

useEffect(() => {
  const subscription = interval(1000).subscribe(() => {
    setDate(new Date())
  })
  return () => {
    subscription.unsubscribe()
  }
}, [])

dateから時・分・秒を取り出し時間をレンダリングします。

return (
  <p>{`${date.getHours()} : ${date.getMinutes()} : ${date.getSeconds()}`}</p>
)