【React Hooks】stateの使用からみたクラスコンポーネントと関数コンポーネントのコード比較

これまでは、stateはクラスコンポーネントのみが持ち、関数コンポーネントの中では使用することができませんでした。
しかし、hookを導入することで関数コンポーネントの中でもstateが使えるようになりました。(hookはReact16.8で追加された機能です。)
今回は、stateを使用するクリックカウントコンポーネントを作成する場合の、クラスコンポーネントと関数コンポーネントのコードを比較をしていきたいと思います。

全体のコード

クラスコンポーネントの場合

Class.js

import React from 'react';

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

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

関数コンポーネントの場合

Function.js

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

関数コンポーネントの方がコード量が少なく、見やすい印象を受けます。
それでは２つの違いを詳しく見ていきましょう。

１．stateの設定方法

クラスコンポーネントでは、コンストラクタ内でthis.stateにstate(count)を設定しています。

Class.js

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

関数コンポーネントでは、useStateフックを使用して、state(count)と、stateを更新する関数(setCount)を分割代入で受け取っています。
useStateの引数には初期値を渡します。

Function.js

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

２．stateの読み出し

クラスコンポーネントで現在のcountの値を表示する場合、this.state.countとします。

Class.js

<p>You clicked {this.state.count} times</p>

関数コンポーネントでは、countとして直接呼び出せます。

Function.js

<p>You clicked {count} times</p>

３．stateの更新

クラスコンポーネントでは、**this.setState()**を使用します。

Class.js

<button onClick={() => this.setState({ count: this.state.count + 1 })}>
  Click me
</button>

関数コンポーネントでは、useStateの分割代入で受け取ったsetCountを使用します。

Function.js

<button onClick={() => setCount(count + 1)}>
  Click me
</button>

まとめ

以上、クラスコンポーネントと関数コンポーネントをstateの使用から見て比較をしてみました。
関数コンポーネントの方が、stateの読み出しも更新も、「this」を介さずそのまま使用できるのですっきり見えます。
最後まで読んでいただきありがとうございました。