【初心者向け】React コンポーネントと React 要素の違いを分かりやすく解説
React コンポーネントと React 要素の違い
React コンポーネントと React 要素は、どちらも React で UI を構築するために使用される重要な概念ですが、それぞれ異なる役割と機能を持っています。
React コンポーネント
React コンポーネントは、再利用可能な UI ブロックを定義するためのテンプレートです。コンポーネントは、見た目や動作を決定する JavaScript コードと、オプションで HTML に似た構文である JSX を含みます。
コンポーネントの主な利点は次のとおりです。
- 抽象化
コンポーネントは、実装の詳細を隠すことで、コードをより読みやすく理解しやすくなります。 - モジュラリティ
コンポーネントは、複雑な UI を小さな、管理しやすい部分に分割するのに役立ちます。 - コードの再利用性
コンポーネントは、アプリケーション内のさまざまな場所で繰り返し使用できます。これにより、コードをより簡潔で保守しやすくなります。
React コンポーネントは、関数コンポーネントとクラスコンポーネントの 2 種類に分類されます。
- クラスコンポーネント
クラスコンポーネントは、React.Component クラスを継承する JavaScript クラスです。クラスコンポーネントは、ステートとライフサイクルメソッドを管理できます。 - 関数コンポーネント
関数コンポーネントは、propsと呼ばれる入力を受け取り、JSX を返す単純な JavaScript 関数です。
React 要素
React 要素は、DOM ノードを表す軽量オブジェクトです。JSX を使用して作成し、コンポーネントを呼び出すとき、またはネイティブ DOM 要素を作成するときに返されます。
React 要素の主な利点は次のとおりです。
- 柔軟性
React 要素は、さまざまな方法で組み合わせることができます。 - 宣言型
React 要素は、UI をどのように表示したいかを宣言的に記述します。 - パフォーマンス
React 要素は軽量で、仮想 DOM を更新する際に高速に処理できます。
React 要素は、オブジェクトとして表されます。オブジェクトには、type プロパティ (要素の種類を表す)、props プロパティ (要素の属性を表す)、および children プロパティ (要素の子要素を表す) が含まれます。
例
次の例は、Greeting という名前の関数コンポーネントと、そのコンポーネントを使用する React 要素を示しています。
function Greeting(props) {
return <h1>こんにちは、{props.name}！</h1>;
}
const element = <Greeting name="太郎" />;
この例では、Greeting コンポーネントは name というプロパティを受け取り、その名前を使用して挨拶を表示する JSX を返します。element 変数は、Greeting コンポーネントを name プロパティに "太郎" という値を渡して呼び出す React 要素を表します。
import React from 'react';
function Greeting(props) {
const { name, language } = props;
const salutations = {
ja: 'こんにちは',
en: 'Hello',
fr: 'Bonjour',
};
return (
<div>
<h1>{salutations[language]}、{name}！</h1>
<p>あなたは {language} を話します。</p>
</div>
);
}
const element1 = <Greeting name="太郎" language="ja" />;
const element2 = <Greeting name="John" language="en" />;
console.log(element1);
console.log(element2);
このコードでは、Greeting コンポーネントは name と language という 2 つのプロパティを受け取ります。salutations オブジェクトは、さまざまな言語での挨拶を格納するために使用されます。コンポーネントは、salutations[language] を使用して適切な挨拶を取得し、name プロパティを使用して挨拶をパーソナライズします。
element1 と element2 変数は、それぞれ異なる name と language プロパティを持つ React 要素を表します。
このコードを実行すると、次の出力がコンソールに表示されます。
<div>
<h1>こんにちは、太郎！</h1>
<p>あなたは ja を話します。</p>
</div>
<div>
<h1>Hello, John!</h1>
<p>あなたは en を話します。</p>
</div>
状態を持つコンポーネント
状態を持つコンポーネントは、コンポーネントの内部でデータを保持できるコンポーネントです。このデータは、コンポーネントのレンダリング方法に影響を与える可能性があります。状態を持つコンポーネントは、クラスコンポーネントとしてのみ定義できます。
クラスコンポーネントは、state プロパティを使用して状態を定義します。state プロパティは、コンポーネントのインスタンスに関連付けられたオブジェクトであり、コンポーネントの内部で読み書きできます。
状態を持つコンポーネントの例を次に示します。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
incrementCount = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
return (
<div>
<h1>カウント: {this.state.count}</h1>
<button onClick={this.incrementCount}>カウントアップ</button>
</div>
);
}
}
この例では、Counter コンポーネントは state プロパティを使用して count という名前の状態を定義します。コンポーネントには incrementCount というメソッドもあり、このメソッドは count の値を 1 ずつ増やすために使用されます。render メソッドは、count の値を表示する JSX を返します。
状態を持たないコンポーネントは、コンポーネントの内部でデータを保持しないコンポーネントです。これらのコンポーネントは、単に UI をレンダリングするために使用されます。状態を持たないコンポーネントは、関数コンポーネントまたはクラスコンポーネントとして定義できます。
関数コンポーネントは、useState フックを使用して状態を管理できます。useState フックは、状態変数とその更新関数を返すフックです。
function Greeting(props) {
const { name } = props;
return <h1>こんにちは、{name}！</h1>;
}
この例では、Greeting コンポーネントは状態を保持しません。コンポーネントは name というプロパティを受け取り、その名前を使用して挨拶を表示する JSX を返します。
javascript reactjs
