More than 1 year has passed since last update.

Reactコンポーネント関数orクラス

Last updated at 2023-10-26Posted at 2023-10-26

はじめに

関数コンポーネントにすべきか、クラスコンポーネントにすべきか
以前記事に書いていたら。。。
@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について・・・頑張ります！