React.js の用語と機能

React.js (一般に React と呼ばれます) は、ユーザー インターフェイス、特にシングル ページ アプリケーション (SPA) の構築に使用される強力な JavaScript ライブラリです。これにより、開発者は複雑な UI をより小さな再利用可能なコンポーネントに分割して作成できます。 React の力を最大限に活用するには、その中心となる用語と機能を理解することが重要です。この記事では、React.js を使用する際に知っておく必要がある重要な概念、用語、機能のいくつかを詳しく説明します。

1.コンポーネント

機能コンポーネント:

関数コンポーネントは、現在 React コンポーネントを定義する最も一般的な方法です。これらは、UI を表す JSX (JavaScript XML) を返す単なる JavaScript 関数です。関数コンポーネントは、React Hooks を使用して状態と副作用を管理することもできます。

function Greeting() {
  return <h1>Hello, World!</h1>;
}

クラスコンポーネント:

React Hooks が導入される前は、クラス コンポーネントがコンポーネントの状態とライフサイクル メソッドを管理する主な方法でした。これらは依然として広く使用されていますが、現在ではフックを備えた関数コンポーネントが推奨される方法です。

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

2.JSX (JavaScript XML)

JSX は JavaScript の構文拡張機能で、JavaScript 内で HTML に似たコードを直接記述することができます。 React は JSX を使用して UI がどのように見えるかを記述します。 JSX は HTML のように見えますが、内部では JavaScript にコンパイルされます。

const element = <h1>Hello, JSX!</h1>;

JavaScript 式を中括弧で囲むことにより、JSX 内に埋め込むこともできます。

const name = "React";
const element = <h1>Hello, {name}!</h1>;

3. 状態

State は、コンポーネントの現在の状況に関する情報を保存するために使用される組み込みの React オブジェクトです。各コンポーネントは独自の状態を管理し、その状態が変化したときに再レンダリングできます。関数コンポーネントは useState フックを使用して状態を管理しますが、クラス コンポーネントは this.state オブジェクトを使用します。

useState (関数コンポーネント) の例:

import { useState } from 'react';

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

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

this.state (クラスコンポーネント) の例:

class Counter 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>
    );
  }
}

4. プロップ (プロパティ)

Props は、あるコンポーネントから別のコンポーネントにデータを渡すために使用されます。これらは、コンポーネントが相互に通信できるようにする関数の引数のようなものです。プロパティは読み取り専用であり、受信コンポーネントによって変更することはできません。

例：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="React" />;
}

この例では、Welcome コンポーネントが App コンポーネントから name prop を受け取り、「Hello, React」をレンダリングします。

5. フック

フックは、関数コンポーネント内の React 状態およびライフサイクル機能に「フック」できるようにする関数です。最も一般的に使用される 2 つのフックは次のとおりです:

使用状態:

関数コンポーネントに状態を追加できます。

function Greeting() {
  return <h1>Hello, World!</h1>;
}

使用効果:

データのフェッチ、サブスクリプション、レンダリングごとの DOM の手動変更などの副作用を処理します。

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

その他の一般的に使用されるフックには、useContext、useReducer、useRef、useCallback などがあります。

6. 仮想 DOM

React は、実際の DOM の軽量コピーである 仮想 DOM を使用して、UI の更新を最適化します。実際の DOM を直接操作する代わりに、React は最初に仮想 DOM を更新し、次に実際の DOM を仮想バージョンと同期させるために必要な最小限の変更を判断します。このプロセスは調整と呼ばれ、特に大規模なアプリケーションでパフォーマンスが大幅に向上します。

7. ライフサイクル メソッド (クラス コンポーネント)

ライフサイクル メソッドは、コンポーネントのライフサイクルのさまざまな段階 (レンダリング、更新、アンマウント) にフックできるようにするクラス コンポーネントの特別なメソッドです。重要なライフサイクル メソッドには次のものがあります。

• componentDidMount(): コンポーネントが DOM にマウントされた後に 1 回呼び出されます。初期データの取得またはサブスクリプションに使用されます。

• componentDidUpdate(): 再レンダリングのたびに呼び出されます。状態またはプロパティの変更に基づいて更新を実行するために使用されます。

• componentWillUnmount(): コンポーネントが DOM から削除される直前に呼び出されます。 API 呼び出しのキャンセルやイベント リスナーの削除などのクリーンアップ タスクに使用されます。

関数コンポーネントでは、useEffect を使用して同じ機能を実現できます。

8. 条件付きレンダリング

React では、状態またはプロパティに基づいてコンポーネントまたは要素を条件付きでレンダリングできます。最も一般的な方法は、JavaScript の三項演算子を使用することです。

例：

const element = <h1>Hello, JSX!</h1>;

条件付きレンダリングの他のアプローチには、JSX での if ステートメントやショートサーキット (&&) の使用が含まれます。

9. リストとキー

React では、要素のリストは .map() メソッドを使用して作成されます。リスト内の各項目には、React によるレンダリングの最適化に役立つ一意の「キー」プロパティが必要です。

例：

const name = "React";
const element = <h1>Hello, {name}!</h1>;

キーは一意で安定している必要があり、どの項目が変更、追加、削除されたかを React が識別できるようにします。

10. フォームと制御コンポーネント

React では、フォームは通常、制御されたコンポーネント を使用して処理され、フォーム要素 (入力など) は React の状態によって制御されます。これにより、React はフォーム要素の値を完全に制御できるようになります。

例：

import { useState } from 'react';

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

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

この例では、入力の値は React ステートによって制御され、入力フィールドの変更がリアルタイムで確実にキャプチャされます。

11. コンテキスト API

Context API を使用すると、すべてのレベルで手動でプロップを渡す必要がなく (「プロップ ドリル」とも呼ばれます)、コンポーネント間で状態やデータを共有できます。これは、アプリ全体にグローバル データ (ユーザー認証やテーマ設定など) を渡す必要がある場合に特に便利です。

例：

function Greeting() {
  return <h1>Hello, World!</h1>;
}

結論

React.js には、習得すべき幅広い機能と用語が用意されています。コンポーネント、JSX、状態、プロパティの基本から、フック、コンテキスト、ライフサイクル メソッドなどのより高度な概念に至るまで、React は最新の Web アプリケーションを構築するための柔軟でスケーラブルなフレームワークを提供します。これらの重要な概念と用語を理解することで、React の可能性を最大限に引き出し、堅牢で保守可能で動的なユーザー インターフェイスを構築できるようになります。

以上がReact.js の用語と機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。