1. HOME
  2. ブログ
  3. IT技術
  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・スマホ系エンジニアを積極採用中です!
※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

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

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事

初心者が3ヶ月でどれくらいプログラミングができるようになるのか

採用情報

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

バックエンドエンジニア

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

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

\ 世界はお前の手の中に・・・ /

モバイルエンジニア

\ サービスの守り神! /

インフラエンジニア

初心者が3ヶ月でどれくらいプログラミングができるようになるのか

初心者が3ヶ月でどれくらいプログラミングができるようになるのか