本日はReactのクラスコンポーネントと関数コンポーネントとの違いを私なりに分かりやすくまとめていきます。
内容はほとんど初学者さん用となっております。
Hookのstateは複数の状態を作れる！!
『useState』を使ったHookのstateは、クラスコンポーネントのstateとは異なる部分があります。
『1つの値を設定するだけという部分です』
『useState』で作れるのは、『1つの値を操作する』
一対の変数だけです。
えっ、１つだけ！？
ですが『useState』そのものはいくらでも記述が可能です！。
複数のstateが必要であれば、その数の分だけ『useState』を用意し値を操作して変数をつくっちゃえばいいんです。
//状態を２つ定義
const App = (props) => {
const [title, setTitle] = useState(props.title);
const [count, setCount] =useState(props.count);
}
クラスの『setState』はこの1つのメソッドで値を操作していきます。
なのでクラスでは複数回呼び出してもrender内では一度きりしか呼ばれません。
常にリロードしちゃう
クラスコンポーネントでは、『状態の維持』がされます。
関数コンポーネントではそれがありません。
クラスコンポーネントはReact.Componentを拡張したJavaScriptのクラスです。
そしてクラスはインスタンスを作成しそれを使います
なのでプログラムが実行されてる間、メモリ内に保管されている内容は常に状態を保ちます。
ブラウザがレンダリングされるまでずっとです。
関数コンポーネントではそれがありません。
必要に応じて何度も何度も繰り返し呼び出されるたびに常に動いているかのように見えてる、 ただそれだけなんです。
そしてもっとも重要な事は
関数コンポーネントでは、コンポーネントの状態をクラスの時みたいに常に値を保管しておきたいのであれば、全てをstateとして用意しておかなければいけません。
これは忘れてはいけない、最重要ポイントです。
そして関数コンポーネントはJSXを返すJavaScriptの関数になります。
副作用Hook
stateを使用している限りは表示は常に新しい状態に保たれます。
しかし表示したいとこにstateを直接使われていないと値の変更があっても更新はありませんよね。
例えばReactの管理しているDOMの外側のサーバーへのアクセスやデータの取得 APIと非同期による処理
その時の状況で必要に応じてこちらからアクセスしデータの取得をしなければいけません。
その時の更新時に必要な処理を実行する為に
用意されたのが『副作用Hook』となります。
クラスのライフサイクルで使用した3つのメソッド
これをこの『useEffect』は同じ機能を果たします。
副作用って使ったらなんか影響あんの？こわい
って思ったりもするかもしれませんが、そういったヤバそうな機能ではないので安心して下さい。
コンポーネントのマウントや更新された時に絶対に欠かせない機能が『useEffect関数』なのです。
//fetchによるAPIの取得
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())
.then(data => {setPosts(data)
})
},[])
//以下省略
useEffectでのAPIは以前の記事でしたのでよければこちらもご一緒に学んでみて下さい。
React Hooks API fetchで取得 - deve.KK
独自Hook
State Hookは関数コンポーネントでクラスでのstateのように機能を実装していけるものになります。
副作用Hookとはちょっと違いますが
一括りにしちゃえば似たようなもんです、強化された機能という事
関数コンポーネントは確かにクラスと同じような事ができるようになりました
ですが、全てなのかと言われるとそんな事はありません。
複雑化したコンポーネントになると、Hookと副作用Hookがお互いに組み込まれて絡み合いそういったのをやっていかなければいけません管理が大変ですね。
これは困った
ではどうするか
関数コンポーネントでは、『機能をコンポーネントから切り離し汎用的に使用できるようにする』
作成する機能を『独自(カスタム)Hook』として定義し機能そのものを独立させます。
こうする事で、複雑化したコンポーネントも必要に応じてどのコンポーネントでも作成した機能が使え
再利用が可能な関数を作る事が可能となるわけです。
独自(カスタム)Hookはかならず関数には『use◯◯』としなければいけません。
これはReactの絶対ルール(規則)となっています。
const useCount = () => {
//処理
}
他にざっくりで説明してしまえば
コードの長さも含まれます クラスでは『React.Component』でクラスを拡張する必要があり、さらに『render』の記述もしなければいけません。
単純に関数型コンポーネントはシンプルで少ないコードで実装ができる、結局ここが1番大きい点でもありますね。
『this』と『bind』これの意識もしなくて済みます。
では、クラスは学ばずに関数コンポーネントだけで良いのか？この疑問に関する答えは
React Hookが導入されたのはv16.8からです、つまりそれ以前でReactで開発された
アプリケーションはクラスで書かれたコードです。
仕事の業務などで少し前のコードの修正を頼まれた際に、事前に学習しておけば困ることはないかもしれませんが
初学者のうちは同時に学ぶと混乱すると思います
クラスを学べば、React Hookがどれだけ素晴らしい機能なのか身に染みて分かってきます。
なので余裕があればクラスもぜひ学んでみて下さい。
どうだったでしょうか
なんとなく違いが分かってくれてれば嬉しいです！。
