🥰

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

2021/08/30に公開約4,000字

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>;
  }
}

ライフサイクルメソッド

・最初と最後1回ずつ

関数コンポーネント

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

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

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

Discussion

ログインするとコメントできます