【React】Hooksを使って関数コンポーネントに状態を持たせる

f:id:lampler:20210613072539p:plain

昔の話

昔は関数コンポーネントとクラスコンポーネントは明確に違った。

関数コンポーネント

状態を持たない
ライフサイクルメソッド（componentDidMountなど）使えない

クラスコンポーネント

状態を持つ
ライフサイクルメソッドが使える

このような違いあった。しかしHooksが導入されてから、関数コンポーネントでもクラスコンポーネントと同じことができるようになった。

なぜHooksが導入されたのか

クラスコンポーネントは難しいから

ベテランエンジニアにとっては慣れているかもしれないが、クラス構文は駆け出しエンジニアには理解しづらい。またJavaScriptのクラスはRubyのようなオブジェクト指向言語のクラスとは違う。JavaScriptのクラスはコンストラクター関数の糖衣構文にすぎないのだ。

コードの記述量を減らすため

クラスコンポーネントには決まり文句のようなコードが多い。そして、その量が無駄に多いのである。しかしHooksを使うとコードの記述量を減らすことができる。

Hooksを使ってみる

import React, { useState, useEffect } from 'react'

function Counter(props) {
  // useStateの引数には初期値を渡す
  // 初期値（state）と値を更新する関数を変数に代入
  const [count, setCount] = useState(0)
  const [name, setName] = useState('')

  // componentDidMount
  // componentDidUpdateと同じ役割
  // つまり、コンポーネントがレンダリングされる度に呼ばれる
  useEffect(() => {
    document.title = `${name}が${count}回クリックしました！`
    // componentWillUnmountはここに書く
    return () => console.log('お掃除しました！')
  })

  return (
    <>
      <input type="text" onChange={e => setName(e.target.value)}/>
      <p>{name}が{count}回クリックしました！</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </>
  )
}

export default Counter

useEffectは再利用ができる

useEffect()をラップした新しい関数を作成して別ファイルに切り出す。その関数をimportすれば異なるコンポーネント間での再利用が可能になる。これもHooksを使う大きなメリットになりそう。

夢のかけら

Goエンジニアの技術ブログ