React における関數(shù)コンポーネントとクラス コンポーネント

React を使用すると、開発者は 関數(shù)コンポーネント と クラス コンポーネント という 2 つの主な方法でコンポーネントを作成できます。どちらも再利用可能な UI 部分を定義するという同じ目的を果たしますが、構(gòu)文、機(jī)能、使用法が異なります。

1.機(jī)能コンポーネントの概要

機(jī)能コンポーネントは、JSX を返す JavaScript 関數(shù)です。これらはシンプルで軽量で、主に UI を表示するために設(shè)計(jì)されています。 React Hooks の導(dǎo)入により、機(jī)能コンポーネントがより強(qiáng)力になり、狀態(tài)とライフサイクル メソッドを管理できるようになりました。

機(jī)能コンポーネントの例

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

2.クラスコンポーネントの概要

クラスコンポーネントは、React.Component を拡張した ES6 クラスです。これらはより複雑な構(gòu)造を持ち、追加のツールなしで狀態(tài)メソッドとライフサイクル メソッドを使用できます。 React Hook が登場する前は、クラス コンポーネントは狀態(tài)とロジックを管理するために不可欠でした。

クラスコンポーネントの例

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

3.関數(shù)コンポーネントとクラスコンポーネントの主な違い

4.機(jī)能コンポーネント: 利點(diǎn)と制限

メリット

1. より単純な構(gòu)文: 記述と理解が容易になります。
2. フック: useState、useEffect、useContext などの強(qiáng)力なツールは、高度な機(jī)能をもたらします。
3. パフォーマンス: クラスのコンポーネントと比較して軽量です。
4. テスト: テストとデバッグが簡単になります。

制限事項(xiàng)

• フックが導(dǎo)入される前は、狀態(tài)とライフサイクルの処理についてサードパーティのソリューションに依存していました。

5.クラスコンポーネント: 利點(diǎn)と制限

メリット

1. 狀態(tài)とライフサイクル: 狀態(tài)とライフサイクル メソッドを管理するための組み込みサポート。
2. レガシー互換性: フック以前の古い React プロジェクトには必須です。

制限事項(xiàng)

1. Verbose: より多くの定型コードが必要です (例: コンストラクター、このバインディング)。
2. パフォーマンス: これとクラス構(gòu)造のオーバーヘッドにより、わずかに遅くなります。
3. 時代遅れの慣行: 機(jī)能コンポーネントが現(xiàn)代の開発の主流を占めているため、一般的ではなくなりました。

6.狀態(tài)とライフサイクルの管理

機(jī)能コンポーネント內(nèi)

React Hook は、機(jī)能コンポーネントの狀態(tài)およびライフサイクル メソッドへのアクセスを提供します。

• 狀態(tài)に useState を使用する:

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

• ライフサイクルに useEffect を使用する:

import React, { Component } from "react";

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

クラスコンポーネント內(nèi)

狀態(tài)メソッドとライフサイクル メソッドは組み込まれていますが、追加の定型文が必要です。

• 狀態(tài)の管理:

  const Counter = () => {
    const [count, setCount] = React.useState(0);

    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  };

• ライフサイクルメソッド:

  const Timer = () => {
    React.useEffect(() => {
      console.log("Component Mounted");
      return () => console.log("Component Unmounted");
    }, []);

    return <p>Timer is running...</p>;
  };

7.関數(shù)コンポーネントまたはクラス コンポーネントを使用する場合

次の場合に機(jī)能コンポーネントを使用します

• 最新の React アプリケーションを構(gòu)築します。
• フックを使用した UI ロジックの簡素化。
• 軽量コンポーネントのパフォーマンスを最適化します。

次の場合にクラス コンポーネントを使用します

• 古い React コードベースの保守または更新。
• レガシー プロジェクトの組み込みの狀態(tài)メソッドとライフサイクル メソッドに依存します。

8.どれを選ぶべきですか?

フックを利用した機(jī)能コンポーネントは、React 開発の現(xiàn)代の標(biāo)準(zhǔn)です。これらは、狀態(tài)、ライフサイクル、副作用を管理するためのよりクリーンで効率的な方法を提供します。クラス コンポーネントは依然として古いプロジェクトに関連していますが、徐々に置き換えられています。

9.結(jié)論

React 開発では関數(shù)コンポーネントとクラス コンポーネントの両方に役割がありますが、React Hooks の臺頭により、優(yōu)先順位は関數(shù)コンポーネントに移りました。新しいプロジェクトの場合は、シンプルさ、柔軟性、パフォーマンスの向上を?qū)g現(xiàn)する機(jī)能コンポーネントが推奨される選択肢です。

以上がReact の関數(shù)コンポーネントとクラス コンポーネント: どちらを選択するか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。