ReactHooksについてまとめた！ #React

はじめに

2020年2月に正式にリリースされたReactHooksについて、学習をしましたので、アウトプットに当記事を投稿します！

この記事を読めば以下のことがわかります！
・クラスと違いがわかる
・ReactHooksの便利さ
・具体的な記述方法

当記事の読者へ、少しでも参考になればとても嬉しいです

解説におかしな点がございましたら、是非ご指摘ください

まずフックとは何か？！！

まずフック(hook)とは何か？
公式のドキュメントを確認すると以下の様に書いております。

state などの React の機能を、クラスを書かずに使えるようになります。

もっと言うのであれば、
フック(hook)を使用すれば、クラス機能(stateやライフサイクル)をFunctional Componentでも使える様になるということです！

補足：
Class Component
➡︎クラスによって定義されたコンポーネント
Functional Component
➡︎関数型で定義されたコンポーネント

なぜフック(hook)を使用するのか

結論から、シンプルさを保つためです。

例えば、個人的ですがclass Componentでは以下の様な部分が難しいと感じることがあります。

・thisを把握する

これは、他者が書いた記述を見るときにthisがどこを指しているのか把握しづらいという点です。
旧Reactでクclass Componentを記述する場合、thisをどうしても使用しなければならなくなって来ます。
例えば、以下の様な記述があった場合で考えてみます。

import React from 'react';



Class Article extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div>
       <h2>{this.props.title}</h2>
      </div>
    );
  }
}

今回の場合ですと、thisはpropsの中から取手しているという意味になりますが、クラスコンポーネントを使用した場合この様な書き方をしなくてはならなくなります。

近年では、thisをなるべく使用しないというのがトレンドとしてもある様で、
Functional Componentを使用するとthisを使用しなくすむため、他の言語との挙動が混在することがなくなります！

Functional Componentの場合の記述

import React from 'react';



const Article = (props) => {
  return(
    <div>
      <h2>{props.title}</h2>
    </div>
  );
};

・stateのロジックが複雑になりやすい

例えば、複数stateが同時に動いていて、各stateがそれぞれのstateに作用してしまうと状況の把握が難しくなり、混乱しやすくなります。

そう言った意味でも、フック（hook)を使用することでシンプルなコードが保てる様になします！

これまでとの変化

今までのReactは、基本的にClass Componentじゃないとstateやライフサイクルが扱えないものでした。

しかし、フック（hook)を使用すれば、先ほど述べた通り、Functional Componentでもstateやライフサイクル使用できる様になりました。

実際に見てみよう！

コードは、Reactのドキュメントから引用してきました！

import React, { useState } from 'react';
import './App.css';


function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>

    </div>
  );
}

export default App;

では、見ていきましょう！

ReactHooksの概念！

ReactHooksをもう少し深ぼって説明すると、Functional Componentにもstateを持たせよう！です。
しかし、そもそもこれまでのReactはclass Componentにしかstateを持たせることができませんでした。
それを、Functional Componentにも持たせられる様にと開発されたのがReactHooksです。

どこがReactHooksの記述なのか

正解は下記述です！

import React, { useState } from 'react';

上記の記述は、{ useState }がReactHooksの概念にあたる部分です。
記述の意味は、"useState関数をインポート"です。

const [count, setCount] = useState(0);

こちらは、普段のFunctional Componentと同様に関数を宣言します。
ポイントは、右辺のuseState（）の値で関数を宣言している点です。
もう少し記述を詳しく見てみると記述は以下の様な意味を持っています。

const [stateの変数, stateの変更関数名] = useState(stateの初期値);

となっています。

最終的に！

ここで定義した、stateの変更関数名をJSX内でアロー関数を用いて呼び出します！


<button onClick={() => setCount(count + 1)}>
  Click me
</button>

以上がReactHooksの概念になります！

補足

ここは、個人的にポイントだと感じので書きます！
公式ドキュメントを確認すると以下の様な記載があります。

100% 後方互換です。フックには破壊的な変更は一切含まれていません。

つまり、ReactHooksと旧Reactの記述では、それぞれが独立しているため、例えば旧Reactの記述方法で開発を進めていて、途中でReactHooksを導入しても旧Reactの記述には影響は与えないということです。
旧Reactの記述方法で開発を進めていたとして、途中ReactHooksを使用したとしても問題これまでの記述には悪影響を出さないという事の様ですね！！

最後に

Reactを勉強をはじめ一ヶ月半経ち、簡単なポートフォリオも完成したのでこれまで学んできた事をアウトプットしました！

もし、記事に間違っている点がありました遠慮なくご指摘ください

皆さんのお役に立てれば幸いです！