【React】関数コンポーネントとクラスコンポーネント

ここ２，３ヶ月Vue、Laravel、Docker、AWS、Stripe、Firebaseを中心に禿げるくらい学習をしてきましたが、最近Reactの学習にも手を入れています。

今日はそんなReactで関数コンポーネントとクラスコンポーネントの違いを初心者なりに解説していこうかなと思います。

this問題の解決

まず初めに、関数コンポーネントとクラスコンポーネントの大きな違いは何か。。。

それは、、、

thisを使わなくていい！！

Javasciprtのthisって保守性に欠けますよね。

Vueをやっていて特に感じました。

見直したときにthisは何を示しているのか。

汎用性が高い分保守性にかけてしまう。

コードを綺麗に書けない僕にとっては致命的です。

それを解決してくれるのが関数コンポーネント！！！

実際に書くとこんな感じ。

App.jsx

const App = () => {
  const [count, upCount] = useState(0)

  const counter = () => {
    upCount(count + 1)
  }
}

これをクラスコンポーネントで書くとなると、stateを使うだけでもthisを使いますよね。

これが関数コンポーネントの力！

bindの不要

関数をporpsとしてコンポーネントに渡すときに、クラスコンポーネントの場合、以下のようにバインドしますよね。

クラス.jsx

this.upCount = this.upCount.bind(this)

upCount() {
  count = count + 1
}

関数コンポーネントなら

関数.jsx

  const counter = useCallback(() => {
    upCount(count + 1)
  })

useCallbackを使うことでバインドしなくて済む！

renderの不要

関数コンポーネントならレンダーも不要！

const App = () => {
  // 省略
  return (
    <></>
  )
}

constructorの不要

関数コンポーネントの場合、useStateでstateの初期化、propsをconstructorではなく関数そのもので引数として受け取っているので、constructorを書かなくて済む！

クラス.jsx

export default class APP extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: ""
    }
}

関数.jsx

const App = (props) => {
  // 
}

ライフサイクルメソッド

useEffectというメソッドを使うことで、ライフサイクルの保守性を高めます。

componentDidMountとcomponentDidUpdateの内容が同じの場合、１つにまとめた方がいいですよね。

useEffectを使うことで、これを一括管理できると言う訳です。

useEffect(() => {
 console.log('mount or update')
})

今回はクラスコンポーネントの特徴を上げていないので分かりませんが、これを見ると関数コンポーネントの方が良いのではと感じました。

実際のところは分からないので、詳しい方はぜひコメント欄にて教えて下さると幸いです。

さて、引き続き勉強頑張りますか。。。

以上、「【React】関数コンポーネントとクラスコンポーネント」でした！

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

あと、最近「ココナラ」で環境構築のお手伝いをするサービスを始めました。

気になる方はぜひ一度ご相談ください！

Thank you for reading

参考記事

Reactでクラスコンポーネントより関数コンポーネントを使うべき理由5選