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度のメシより技術が好き /
(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
システム開発依頼・お見積もりはこちらまでお願いします。
また、WEB・スマホ系エンジニアを積極採用中です!
※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

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

書いた人はこんな人

ライトコード社員ブログ
ライトコード社員ブログ
「好きなことを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡本社、東京オフィスの2拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎!
また、WEBエンジニアとモバイルエンジニアも積極採用中です!

ご応募をお待ちしております!

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界を変える…! /

Androidエンジニア

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

iOSエンジニア