はじめに
関数コンポーネントにすべきか、クラスコンポーネントにすべきか
以前記事に書いていたら。。。
@honey32 さんがコメントで参考リンクをくださり😊 ← ありがとうございます！
早速確認しながら理解を進めることにしました！
関数コンポーネントが推奨
Reactの新しいドキュメントによると...
関数コンポーネントが推奨らしい！！
昔はクラスコンポーネントが推奨だった！？
昔はクラスコンポーネントのみが持っていた機能があり
その結果、クラスコンポーネント推奨時代があったようです。
State
コンポーネントがレンダリングされる際に その時のデータを保持 し、
データの変化 に応じてコンポーネントを 再レンダリング するもの。
Stateが変わるかどうかが監視されていて
変わった瞬間、 "ハイ！変更入ったから再表示！" みたいなイメージでいます
Lifecycle Hooks
下記の一連の流れのこと。
・Mounting(マウント):コンポーネントをレンダーする
・Updating(更新):コンポーネントのStateを更新する
・Unmounting(アンマウント):コンポーネントのレンダーが切れる
Hooks (React 16.8 で追加された新機能) の登場で
関数コンポーネントでも可能に！
コードが長くなりがちなクラスコンポーネントは、お役御免に。。。。
（なんかちょっとクラスコンポーネントがかわいそう🥺😂)
▪️コードの長さ比較
関数コンポーネントの場合
function Greeting(props) {
return <h1>Hi, {props.name}</h1>;
}
クラスコンポーネントの場合
class Greeting extends React.Component {
render() {
return <h1>Hi, {this.props.name}</h1>;
}
}
関数コンポーネントでかけば、スッキリ！
おわりに
今後コードを書くときはぜひ関数コンポーネントで書いて行こうと思います。
次回、ぼやっと理解のままコードで使っているhooksについて・・・頑張ります！