2020-10-13

ReactのFunction ComponentとClass Component

Thumbnail

こんにちは。バンです。

最近は React を使うことが増えました。

Next.js 案件も扱い始めましたし、この Blog は Gatsby.js で作ってますし、React Native 案件も最近は登場しています。

もともとはもっぱら Vue、というか Nuxt.js を使っていたのですが、まあ飯を食いたければ色々なものを扱えるようになれ 、と大工の親父に言われて育ったので、色々なものを扱うようにしようと思いました。

そんな中で、まず最初にぶつかるというか、気づくのが、React の Component って 2 種類ねえ? ってことだと思います。

それについての調査内容を共有しようと思います。

できる限り手短に把握していただくために要点だけ拾いますが、詳細がきちんとまとまっているリンクを随時つけておきます。

2 種類のコンポーネント

結論からいうと、React の Component には 2 種類の定義方法があります。

  • Function Component
  • Class Component

です。

それを踏まえて React 初心者が注意しないといけないのは、色々なサンプルを漁っていくなかで、その サンプルがどちらの Component を採用しているかを認識する 必要があるということです。

変にごちゃまぜにするのが最悪です。state やライフサイクルなどを扱ううえで、Class Component のcomponentDidMound は Function Component のuseEffect に置き換える、などの対応関係もある程度必要になってきます。私は React を使い始めた当初、そこで結構悩みました。なのでしっかり認識しておきましょう。

Function Component

Function Component は下記のように構成されます

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
}

TypeScript ならこんな感じで書いたりします

type Props = {
  name: string
}

const Welcome: React.FC<Props> = (props) => {
  return <h1>Hello, {props.name}</h1>
}

Class Component

Class Component は下記のように構成されます。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

経緯

この Function Component ですが、最初は state を扱うことが出来ていなかったようです。こういったフレームワークを使うにあたって state は重要な役割を果たしますので、致命的ですよね。

そこに、React 16.8 (React Native 0.59) より useState などの Hook がサポートされました。

それで初めてクラスを書かずに state を扱えるようになりました。

Hook が何を解決しているんだ、みたいなところは下記のページによ〜くまとまっています。本当はこういうのをちゃんと読んだほうがいいです。 https://ja.reactjs.org/docs/hooks-intro.html

推奨されるもの

上記 URL にも記載がありますが、

クラスコンポーネントのユースケースをすべてフックがカバーできるようにする予定ではいますが、クラスコンポーネントのサポートも予見可能な将来にわたって続けていきます。

とのことです。つまり、どちらを使っても基本的には問題ないです。

ただ、Function Component のほうに力を入れて開発を進めていく雰囲気を感じます。

フックは、より多くの React の機能をクラスを使わずに利用できるようにします。コンセプト的には、React のコンポーネントは常に関数に近いものでした。フックは関数を活用しながらも、React の実用性を犠牲にしません。フックは命令型コードへの避難ハッチへのアクセスを提供しますし、複雑な関数型プログラミングやリアクティブプログラミングの技法を学ばせることもありません。

など、Hook 便利ですよ、というアピールが強いですし…

私は基本的には Fucntion Component を採用して開発を進めています。

Function Component でよくつかうやつ

そんな Function Component でよくつかうやつというかまず見るでしょう、というものたちの役割をまとめておきます。

基本は フック早わかり にあるとおりですが、ちょっと一個一個が長いのでかみ砕きます。

useState

いわずもがな、state を扱うためのものです。

const [open, setOpen] = useState(false)

で、ステートフル値と更新用関数を準備できます。
上の例では openfalse が入り、setOpen(true) などで open の値を変更できます

あと、関数型更新ができるのも抑えておきたいところです。以下は公式からそのまま引っ張ってきた例です

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount)
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount((prevCount) => prevCount - 1)}>-</button>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>
    </>
  )
}

これは、新しい state(ここでいう count )が、前の state に基づいて計算されるというところで使用します。

ちなみに useState の引数に関数を与えてあげることも可能です!

useEffect

この useEffect も大事です。

useEffect(() => {
  const subscription = props.source.subscribe()
  return () => {
    subscription.unsubscribe()
  }
}, [props.source])

この場合、 props.source に変更があったときに第一引数の関数が実行されます。

なお、マウント時に実行されるだけでよければ、第二引数を空の配列 [] にすればよいです
これも見通しがちな話です。。

useContext

React には context という概念があります。
React.createContext などで作るのですが、用途としては「多くのプロパティからの参照値」になります。テーマなどが挙げられます。

それが変更した際に取得する、というのも、

const value = useContext(MyContext)

などで context を useContext の引数に渡せば、コンテキスト値の変更に対応して再レンダーしてくれます。素敵です。

その他

と、主要な 3 つの Hook についてつらつら書きましたが、下記ページに全てのフックの記載があります。
Function Component を使ううえで知っておいて損はないとおもいます。

フック API リファレンス - React

まとめ

React 使うにあたっては現時点では Function Component を基本で進めて大丈夫、な記事でした。
むかーしの記事だと、state を扱うなら Class Component、みたいな記述があったりするので混乱しないように、というところです。

下記 URL などもご参照くださいね。
コンポーネントと props - React

よき React ライフを送りたい限りです。

管理者

Takuya Ban
Takuya Ban

何でも系エンジニアです。

qiita

新着記事

BigQueryに限らずSQL関連の謎エラーはだいたいこういう凡ミスです。
Reactの2種類のコンポーネントについて、今から学ぶ人向けです。
もうすぐ5G対応iPhoneが出るけどそもそも5G使える場所がないのでは…
大阪都構想が告示されましたが…
モックとか作る上でのもはや必須ツールともいえるLorem Picsumの使い方メモです。

qiita

© 2020, Takuya Ban