React でのクラスコンポーネントと機能コンポーネントの選択

プラトン再発行

フォロワー： 0

React PlatoBlockchain Data Intelligence でのクラスコンポーネントと機能コンポーネントの選択。垂直検索。あい。

コアの違い

React では、コンポーネントはユーザーインターフェイスの一部を表すコードです。 React には、クラスコンポーネントと機能コンポーネントの XNUMX 種類のコンポーネントがあります。

クラスコンポーネントは、React.Component クラスを拡張するクラスを使用して定義されます。それらはより機能が豊富で、状態とライフサイクルイベントを処理するためのより多くのオプションがあります。クラスコンポーネントは次のようになります。

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

機能コンポーネントは、React 要素を返す単なる JavaScript 関数です。これらはクラスコンポーネントよりも単純で、読み書きが容易です。以下は、機能コンポーネントとして書かれた上記と同じコンポーネントです。

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

いつ何を使うか

一般に、状態メソッドやライフサイクルメソッドなど、クラスコンポーネントでのみ使用できる機能を使用する必要がない限り、機能コンポーネントを使用する必要があります。
いくつかあります。 理由は なぜあなたが好むかもしれない 機能コンポーネントよりもクラスコンポーネントを使用する:

読みやすさ: クラスコンポーネントを使用すると、特にステートメソッドやライフサイクルメソッドが多数ある場合に、コードを理解しやすくなります。コードは、明確に定義された見つけやすいメソッドに編成されています。
再利用性: クラスコンポーネントは、拡張して新しいコンポーネントを作成できるため、より簡単に再利用できます。これは、コンポーネント間で多くの共有機能がある場合に特に便利です。
組織: クラスコンポーネントを使用すると、関連するメソッドを同じコンポーネントにまとめてグループ化できるため、コードの編成が容易になります。これにより、コードの検索と保守が容易になります。

また、書き込みを選択する理由がいくつかあります。 機能コンポーネント:

状態またはライフサイクルメソッドを使用する必要がない場合: 状態またはライフサイクルメソッドを使用する必要がない場合は、クラスコンポーネントよりも単純で読み書きが簡単な関数コンポーネントが適しています。
純粋なコンポーネントが必要な場合: Functional コンポーネントは「純粋な」コンポーネントです。つまり、props のみに依存し、独自の状態を持たないことを意味します。これは、小道具が変更されたときにのみコンポーネントが再レンダリングされるようにする場合に役立ちます。
パフォーマンスを最適化したい場合: 機能コンポーネントは純粋であるため、React によってより簡単に最適化でき、パフォーマンスが向上する可能性があります。
簡潔で読みやすいコードを記述したい場合: 機能コンポーネントはより単純で可動部分が少ないため、特にアプリケーションに多くのコンポーネントがある場合は、読みやすく理解しやすくなります。

一般に、クラスコンポーネントでしか満たすことができない特定のニーズがない限り、機能コンポーネントを使用する必要があります。

useEffect & useState

ただし、関数コンポーネントでも状態メソッドとライフサイクルメソッドを使用できることに注意することが重要です。 使用状態 & useEffect フック。一般に、ニーズに最も適したタイプのコンポーネントを選択する必要があります。これにより、コードが最も読みやすく理解しやすくなります。

状態またはライフサイクルイベントを実装したい場合は、フックを使用してコンポーネントを有効にすることができます。

これはあなたが実装する方法です useEffect & 使用状態 機能コンポーネント内

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

ここでは、カウントを追跡し、現在のカウントをユーザーに表示するコンポーネントがあります。コンポーネントは、 使用状態 機能コンポーネントに状態を追加するためのフック、および useEffect カウントが変更されたときにアクション (ドキュメントのタイトルを更新) を実行するためのフック。

主要な取り組み

これらは、React でクラスコンポーネントと機能コンポーネントのどちらを選択するかについての主な要点です。

クラスコンポーネントは、React.Component クラスを拡張するクラスを使用して定義され、状態およびライフサイクルイベントを処理するためのより多くのオプションがあります。
機能コンポーネントは、React 要素を返す単なる JavaScript 関数であり、読み書きがより単純で簡単です。
状態メソッドやライフサイクルメソッドなど、クラスコンポーネントでのみ使用できる機能を使用する必要がない限り、機能コンポーネントを使用する必要があります。
useState フックと useEffect フックを使用して、機能コンポーネントに状態を追加し、副作用を実行できます。
全体として、クラスコンポーネントと機能コンポーネントのどちらを選択するかは、ニーズに最も適したものと、コードを最も読みやすく理解しやすいものにすることに帰着します。

この簡単な説明がお役に立てば幸いです。 JavaScript、React、または Web 開発全般を学ぶための指導やガイダンスが必要な場合は、1 対 1 のセッションについてお気軽にお問い合わせください。