【React】クラスコンポーネントを関数コンポーネントに書き換え

はじめに

React Way 的にはクラスコンポーネントよりも関数コンポーネントのほうが望ましい。
そこでクラスコンポーネントで書かれたコードを関数コンポーネントに書き換えた。

書き換え前

App.jsx

import React, { Component } from 'react';//オブジェクトをimportする時は{}を使う
import Child from './Child';

class App extends Component {
  render() {
    const characters = [
      { name: 'ヒトカゲ', hp: 80, mp: 30 },
      { name: 'ゼニガメ', hp: 100, mp: 20 },
      { name: 'フシギダネ', hp: 120, mp: 10 }
    ];

    return (
      //React.Fragmentのシンタックスシュガー
      <>
        {/* game属性とcharacters属性がpropsとして子要素へ渡される */}
        <Child game="ぽけもん" characters={characters} />
      </>
    );
  }
}

export default App;

Child.jsx

import React, { Component } from 'react';

class Child extends Component {
  render() {
    // ※this.props.gameでも値は取れるけど分割代入活用
    const { game, characters } = this.props;

    return (
      <>
        <h1>{game}</h1>
        {characters.map(character => (
          // 一意なkeyをつける
          <div key={character.name}>
            <div>{character.name}</div>
            <div>{character.hp}</div>
            <div>{character.mp}</div>
          </div>
        ))}
      </>
    );
  }
}

export default Child;

TSでは

App.tsx

import React, { Component } from 'react';
import Child,{ Character } from './Child';

class App extends Component {
  render() {
    const characters :Character[] = [
      { name: 'ヒトカゲ', hp: 80, mp: 30 },
      { name: 'ゼニガメ', hp: 100, mp: 20 },
      { name: 'フシギダネ', hp: 120, mp: 10 }
    ];

    return (
      <>
        <Child game="ぽけもん" characters={characters} />
      </>
    );
  }
}

export default App;

Child.tsx

import React, { Component } from 'react';

export interface Character{
  name: string,
  hp: number,
  mp: number
}

interface CharactorListProps{
  game: string,
  characters: Character[]
}

//<CharactorListProps>はジェネリクスでpropsの型を指定する
class Child extends Component<CharactorListProps>{
  render() {
    const { game, characters } = this.props;

    return (
      <>
        <h1>{game}</h1>
        {characters.map(character => (
          <div key={character.name}>
            <div>{character.name}</div>
            <div>{character.hp}</div>
            <div>{character.mp}</div>
          </div>
        ))}
      </>
    );
  }
}

export default Child;

書き換え

Child.tsx

-import React, { Component } from 'react';
+import React, { FC } from 'react';//FCはFunctionComponentでもOK

export interface Character{
  name: string,
  hp: number,
  mp: number
}

interface CharactorListProps{
  game: string,
  characters: Character[]
}

-class Child extends Component<CharactorListProps>{
+//FCは関数コンポーネントの型//
+const Child: FC<CharactorListProps> = ({ game, characters }) => {


-render(){
-const { game, characters } = this.props;

  return (
    <>
      <h1>{game}</h1>
      {characters.map(character => (
        <div key={character.name}>
          <div>{character.name}</div>
          <div>{character.hp}</div>
          <div>{character.mp}</div>
        </div>
      ))}
    </>
  );
}

export default Child;