【ガチ初心者】React クラスコンポーネントと関数コンポーネントの違いを超ざっくり😀

React初心者の自分用にまとめておきます。

いきなり結論から言うと

関数コンポーネントがオススメです

理由として、簡単に超ざっくり言うと

• コードが短く済む

からです。（あとはReactチームがReactフックのサポートに結構力を入れているから）

詳細は下記通りです。

---

コードが短く済む

関数コンポーネント、クラスコンポーネントに関してざっくり色々なパターンのコードを記載します。

• stateの処理
• propsの受け渡し
• 関数の使い方
• ライフサイクルメソッド

stateの処理

実行イメージ図

関数コンポーネント

import { useState } from 'react'

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

 return (
   <div>
     <p>count: {count}</p>
     <button onClick={() => setCount(count + 1)}>Click</button>
   </div>
 );
};

クラスコンポーネント

import { Component } from 'react'

class ClassComponent extends Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <div>
       <p>count: {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click
       </button>
     </div>
   );
 }

propsの受け渡し

実行イメージ図

こういう値を渡した場合

<Component name="Nakayama Kinniku" />

関数コンポーネント

const FunctionalComponent = (props) => {
 return <h1>Hello, {props.name}</h1>;
};

クラスコンポーネント

import { Component } from 'react'

class ClassComponent extends Component {
  render() {
    return <h1>Hello, { this.props.name }</h1>;
 }
}

関数の使い方

実行イメージ図

関数コンポーネント

const FunctionalComponent = (props) => {
 const handleClick = () => {
   console.log("Click happened");
 }
 return <button onClick={handleClick}>Click</button>;
};

クラスコンポーネント

import { Component } from 'react'

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    console.log("Click happened");
  }
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

ライフサイクルメソッド

・最初と最後１回ずつ

関数コンポーネント

import { useEffect } from "react";

const FunctionalComponent = () => {
  useEffect(() => {
    console.log("Hello");
    return () => console.log("bye")
  }, []);
  return <h1>Hello, World</h1>;
};

クラスコンポーネント

import { Component } from 'react'

class ClassComponent extends Component {
  componentDidMount(){
    console.log("Hello");
  }
  componentDidUnmount(){
    console.log("bye");
  }
  render() {
    return <h1>Hello, World</h1>;
  }
}

・特定の値が更新された時のみ

関数コンポーネント

import { useEffect, useState } from "react";

const FunctionalComponent = () => {
  const [ count, setCount ] = useState(0)
  useEffect(() => {
    console.log(count);    
  }, [count]);
  return <button onClick={()=> setCount(c => c + 1)}>count</button>;
};

クラスコンポーネント

import { Component } from 'react'

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
 componentDidMount(){
    console.log(this.state.count);
 }
 componentDidUpdate(){
    console.log(this.state.count);
 }
 render() {
   return (
     <div>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         click
       </button>
     </div>
   );
 }

最後にコードの文字数とかをざっくり比較（あくまで目安）

文字数

コード内容	関数コンポーネント	クラスコンポーネント	倍率
stateの処理	186	261	1.4
propsの受け渡し	71	114	1.6
関数の使い方	139	251	1.8
ライフサイクル（最初と最後）	158	186	1.2
ライフサイクル（特定の値）	207	328	1.6

Thisって出てきた数

コード内容	関数コンポーネント	クラスコンポーネント
stateの処理	0	4
propsの受け渡し	0	1
関数の使い方	0	3
ライフサイクル（最初と最後）	0	0
ライフサイクル（特定の値）	0	5

コードの書き方なんて幾らでもあるのであくまで目安ですが、参考程度に。
こんだけ短いコードでも、結構文字数って変わるもんですね。

以上です。
ありがとうございました。