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よりもパフォーマンスが低い

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

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

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"));

• 関数コンポーネント: propsを受け取り、JSXを使用してUIを記述します。
• PureComponent: propsとstateの浅い比較を行い、変更がなければrenderをスキップします。
• Component: 状態とライフサイクルメソッドを持ち、複雑な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,