1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. React Hooks登場でコンポーネントはどう変わった?
ReactHooks登場でコンポーネントはどう変わった?

React Hooks登場でコンポーネントはどう変わった?

React Hooks とは?

React Hooks」とは、React16.8より追加された新機能です。

これにより、クラスコンポーネントでしか使えなかった機能が、関数コンポーネントでも使えるようになりました。

【React 公式ドキュメント - フックの導入】
https://ja.reactjs.org/docs/hooks-intro.html

今回は、ReactHooks 登場前後のコンポーネントを比較し、「記法がどのように変わったのか」を見ていきたいと思います!

実装するサンプル

違いを分かりやすくするために、以下のような機能を持ったコンポーネントを実装します。

  1. 状態として count という変数を持つ
  2. カウントアップボタンを押すことで、 count をインクリメントする
  3. count は常に画面上に表示する
  4. コンポーネントのマウント時・状態の更新時・アンマウント時に、それぞれコンソール出力する

それではさっそく、実装サンプルを見ていきましょう!

クラスコンポーネントで実装した場合

まずは、従来通り「クラスコンポーネント」で実装した場合です。

従来の React の記法に慣れた方にとっては、少し冗長な表記になるかもしれません。

ここがポイント!

コンストラクタでコンポーネントの状態である state を初期化し、ボタン押下のタイミングで setState を用いて更新します。

また、コンポーネントがマウント・アンマウントされたタイミングや、状態が更新されたタイミングはそれぞれ componentDidMount , componentWillUnmount , componentDidUpdate といった React のライフサイクルメソッドを用いて検知し、コンソールに出力しています。

React Hooks を使った関数コンポーネントで実装した場合

続いて、「React Hooks」を使った実装パターンを見てみましょう。

React Hooks を使う際のルールとして、「関数コンポーネント中のトップレベル」で定義する必要があります。

クラスコンポーネントでの実装に比べると、全体的に記述量が減っているのが一目瞭然ですね。

ここがポイント!

useState

React Hooks では、 useStatestate を定義しています。

this.state や this.setState なしで state が扱えます。

useEffect

useEffect で、関数コンポーネントでライフサイクルメソッド機能が使用可能になります。

クラスコンポーネントで使用した、以下の3つがまとまったものとイメージすれば分かりやすいでしょう。

  1. componentDidMount
  2. componentWillUnmount
  3. componentDidUpdate

isMounted

また、 count に加えて isMounted という真偽値型の状態を持たせています。

関数コンポーネントでは、コンポーネントがマウント済みかどうかの状態を独自で持つ必要があるためです。

動作検証用コンポーネント

実際に、お手元の環境で上記コンポーネントの動作検証をする場合、以下をお使いください。

showComponent という状態を持ち、その値によって NormalComponent と HooksComponent の2種のコンポーネントのマウント・アンマウントを制御しています。

「Show/Hide Component」のボタンをクリックすると、各コンポーネントのマウント・アンマウント処理が正常に行われていることを確認できます。

さいごに

今回は、「React Hooks 登場前後のコンポーネントの違い」について解説しました。

クラスコンポーネントと React Hooks を用いた関数コンポーネントとでは、同じ挙動をさせる場合でも記法が大きく異なることが分かりますね。

両者とも基本の記法を覚えておけば、2つを組み合わせて複雑な処理を実現することが可能です。

ぜひ、しっかり覚えておきましょう!

こちらの記事もオススメ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア