私の React の旅は 4 年前に機能コンポーネントとフックから始まりました。次に、ブートキャンプの参加者であり、常駐クラスのコンポーネントの愛好家である 'Siswe 氏がやって来ました。私たちの残りのメンバーが機能コンポーネントを使用したチーム プロジェクトで共同作業している間、「Siswe は揺るぎない忠誠心でクラス コンポーネントにしがみつきました。

コンポーネントは、ユーザー インターフェイス (UI) の構成要素です。

これらをレゴ ブロックと考えてください。さまざまな方法で組み合わせて、複雑な構造を作成できます。これらは、UI とロジックをカプセル化する独立した再利用可能なコード部分です。

別のコンポーネント内でコンポーネントを再利用する場合、通常は次のようになります:

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    

      
  );
}

クラス コンポーネントと関数コンポーネントは、React でコンポーネントを作成する 2 つの主な方法です。

import React, { Component } from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
  this.state = { count: 0 };
 }

 handleClick = () => {
  this.setState({  
 count: this.state.count   1 });
 };

 render() {
  return  
 (
   

    
You clicked {this.state.count} times
    Click me
   
  );
 }
}

export default Counter;

これは、React.Component クラスを拡張する JavaScript クラスを使用して作成されたクラス コンポーネントです。

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count   1);
  };

  return (
    

      
You clicked {count} times
      Click me
    
  );
}

export default Counter;

一方、これは機能コンポーネントであり、単純な JavaScript 関数として記述されます。

状態管理: 主要な違い。

クラス コンポーネントは、this.state を使用して独自の内部状態を管理します。上記のコード ブロックに見られるように、これは通常、コンストラクターで初期化され、this.state オブジェクトを使用してアクセスされ、this.setState メソッドを使用して更新されます。

機能コンポーネントは当初ステートレスでした。しかし、フックの導入により、状態とライフサイクル ロジックを管理できるようになりました。状態を管理するために useState フックを利用して、上記のように、現在の状態とそれを更新する関数という値のペアを返します。単純な状態管理にはこれで十分です。複数のサブ値を含むより複雑な状態ロジックの場合、または次の状態が前の状態に依存する場合は、 useReducer.
を使用します。 例えば：

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count   state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    

      
Count: {state.count}
      
Step: {state.step}
       
      -
       setStep(Number(e.target.value))} />
    
  );
}

export default Counter;

ここで、useReducer は複数の状態値と複雑な更新ロジックを構造化された保守可能な方法で管理しています。フックは機能部品専用です。

両方のコンポーネントで状態オブジェクトを直接操作することは避けてください。

コンポーネントの種類に関係なく、状態オブジェクトを直接変更または変更しないでください。代わりに、更新された値を使用して新しいオブジェクトを作成します。このアプローチは、React が変更を効率的に追跡し、再レンダリングを最適化するのに役立ちます。

機能要素の例:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    

      
Name: {user.name}
      
Age: {user.age}
       handleNameChange(e.target.value)} />
    
  );
}

export default UserProfile;

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

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      

        
Name: {this.state.user.name}
        
Age: {this.state.user.age}
         this.handleNameChange(e.target.value)} />
      
    );
  }
}

export default UserProfile;

どちらの例でも、元のオブジェクトの整合性を維持しながら、ユーザー オブジェクトの name プロパティを更新しています。これにより、新しい状態オブジェクトが確実に作成され、不変性が維持され、状態の更新に関する潜在的な問題が防止されます。これに従うことで、予測可能な動作、パフォーマンスの最適化、およびデバッグの容易化が保証されます。

クラス コンポーネントは複雑なロジック用です。

• 複雑な状態管理: きめ細かい制御が必要な複雑な状態ロジックを扱う場合、this.state と this.setState を備えたクラス コンポーネントにより柔軟性が高まります。
• ライフサイクル メソッド:componentDidMount、componentDidUpdate、componentWillUnmount などのライフサイクル メソッドに大きく依存するコンポーネントの場合、クラス コンポーネントが従来の選択肢です。
• エラー境界: コンポーネント ツリー内のエラーを処理し、クラッシュを防ぐには、componentDidCatch を備えたクラス コンポーネントが不可欠です。
• パフォーマンスの最適化: パフォーマンスが重要な特定のシナリオでは、クラス コンポーネント内の PureComponent または shouldComponentUpdate を活用できます。
• レガシー コードベース: クラス コンポーネントに大きく依存する既存のプロジェクトに取り組んでいる場合、新しいコンポーネントにクラス コンポーネントを使用すると、一貫性を維持しやすくなる可能性があります。

機能コンポーネントは単純なビュー用です。

• 単純なコンポーネント: 最小限の状態またはロジックを備えたプレゼンテーション用コンポーネントの場合、その単純さと読みやすさのため、多くの場合、機能コンポーネントが好まれる選択肢となります。
• フックによる状態管理: 機能コンポーネントで useState と useReducer を活用すると、状態を管理するための強力かつ柔軟な方法が提供されます。
• 副作用: useEffect フックを使用すると、データのフェッチ、サブスクリプション、手動の DOM (ドキュメント オブジェクト モデル) 操作などの副作用を管理できます。
• パフォーマンスの最適化: useMemo と useCallback を使用して、機能コンポーネントのパフォーマンスを最適化できます。

コンポーネントのニーズに基づいて決定してください。

一般に、関数型アプローチの方が簡潔で読みやすいと考えられており、単純さと効率のおかげで十分であることがよくあります。ただし、クラス コンポーネントは、特に複雑なロジックやパフォーマンスの最適化を扱う場合に、状態管理とライフサイクル メソッドをより詳細に制御できます。これは、複雑なロジックを整理するためのより良い構造を意味します。

厳密なルールがないため、クラス コンポーネントと機能コンポーネントのどちらを選択するかは必ずしも明確ではありません。コンポーネントの要件を評価し、プロジェクトの要件に最も適合するタイプを選択してください。

どのコンポーネントを使って作業するのが一番楽しいですか?