Reactコンポーネントの種類：関数コンポーネント、PureComponent、Component

Reactのコンポーネント：関数コンポーネント、PureComponent、Component

関数コンポーネント

関数コンポーネントは、ReactフックとJSXを使用して作成される軽量なコンポーネントです。状態を持たないため、パフォーマンスが向上し、コードもシンプルになります。

関数コンポーネントを使用する例

const MyComponent = () => {
  // propsを受け取る
  const { name } = props;

  // JSXでUIを記述する
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

• テストが容易
• 状態管理が不要
• コードがシンプル
• 軽量で高速

• ライフサイクルメソッドを使用できない
• 状態を持てない

PureComponent

PureComponentは、React.PureComponentクラスを継承することで作成されるコンポーネントです。PureComponentは、propsとstateの浅い比較を行い、変更がなければrenderをスキップすることでパフォーマンスを向上させます。

PureComponentを使用する例

class MyComponent extends React.PureComponent {
  render() {
    // propsを受け取る
    const { name } = this.props;

    // JSXでUIを記述する
    return (
      <div>
        <h1>Hello, {name}!</h1>
      </div>
    );
  }
}

• パフォーマンスを向上させる
• propsとstateの変更に基づいてrenderを最適化する

• 深い比較が必要な場合は不適切
• shouldComponentUpdateをオーバーライドできない

Component

Componentは、React.Componentクラスを継承することで作成される基本的なコンポーネントです。状態やライフサイクルメソッドを持ち、複雑なUIを構築することができます。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
    };
  }

  render() {
    // propsとstateを受け取る
    const { name } = this.props;
    const { count } = this.state;

    // JSXでUIを記述する
    return (
      <div>
        <h1>Hello, {name}!</h1>
        <p>Count: {count}</p>
      </div>
    );
  }
}

• 複雑なUIを構築できる

• 関数コンポーネントやPureComponentよりもパフォーマンスが低い

どのコンポーネントを使用すべきか

• 複雑なUIを構築する必要があるコンポーネントには、Componentを使用します。
• propsとstateの変更が頻繁に発生し、パフォーマンスが重要なコンポーネントには、PureComponentを使用します。
• 状態を持たないシンプルなコンポーネントには、関数コンポーネントを使用します。

const MyComponent = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent name="John" />
      <MyComponent name="Jane" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

class MyComponent extends React.PureComponent {
  render() {
    const { name } = this.props;
    return (
      <div>
        <h1>Hello, {name}!</h1>
      </div>
    );
  }
}

const App = () => {
  const [name, setName] = React.useState("John");
  return (
    <div>
      <MyComponent name={name} />
      <button onClick={() => setName("Jane")}>Change Name</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

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

  render() {
    const { name } = this.props;
    const { count } = this.state;
    return (
      <div>
        <h1>Hello, {name}!</h1>
        <p>Count: {count}</p>
        <button onClick={() => this.setState({ count: count + 1 })}>
          Increment Count
        </button>
      </div>
    );
  }
}

const App = () => {
  return (
    <div>
      <MyComponent name="John" />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

• Component
  状態とライフサイクルメソッドを持ち、複雑なUIを構築することができます。
• PureComponent
  propsとstateの浅い比較を行い、変更がなければrenderをスキップします。
• 関数コンポーネント
  propsを受け取り、JSXを使用してUIを記述します。

関数コンポーネントの代替方法

高階関数 (HOC)

高階関数 (HOC) は、他のコンポーネントを受け取り、新しいコンポーネントを返す関数です。HOCを使用して、コンポーネントに共通の機能を追加することができます。

例

const withName = (Component) => {
  return (props) => {
    return (
      <Component {...props} name="John" />
    );
  };
};

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

const App = () => {
  return (
    <div>
      <withName MyComponent />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

カスタムフック

const useName = () => {
  const [name, setName] = React.useState("John");
  return { name, setName };
};

const MyComponent = () => {
  const { name, setName } = useName();
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={() => setName("Jane")}>Change Name</button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Render Props

Render Propsは、コンポーネント間でレンダリングロジックを共有するためのパターンです。

const MyComponent = ({ render }) => {
  return (
    <div>
      {render()}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent
        render={() => {
          return (
            <h1>Hello, John!</h1>
          );
        }}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

PureComponentは、propsとstateの浅い比較に基づいてrenderをスキップすることでパフォーマンスを向上させます。PureComponentの代替方法として、以下の方法があります。

shouldComponentUpdate

shouldComponentUpdateは、コンポーネントが更新されるべきかどうかを決定するライフサイクルメソッドです。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.name !== nextProps.name || this.state.count !== nextState.count;
  }

  render() {
    const { name } = this.props;
    const { count } = this.state;
    return (
      <div>
        <h1>Hello, {name}!</h1>
        <p>Count: {count}</p>
      </div>
    );
  }
}

React.memo

React.memoは、コンポーネントをラップして、propsとstateの浅い比較に基づいてrenderをスキップする関数です。

const MyComponent = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

const App = () => {
  const [name, setName] = React.useState("John");
  return (
    <div>
      <React.memo MyComponent name={name} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Componentは、状態とライフサイクルメソッドを持つ基本的なコンポーネントです。Componentの代替方法として、以下の方法があります。

関数コンポーネントと状態管理ライブラリ

関数コンポーネントと状態管理ライブラリ (Reduxなど) を組み合わせることで、状態を持つコンポーネントを作成することができます。

const MyComponent = ({ name }) => {
  const { count, dispatch } = useSelector((state) => state);
  return (
    <div>
      <h1>Hello,