ReactJSで関数コンポーネントとフックを使うべき理由
By hientd, at: 2024年9月16日17:43
Estimated Reading Time: __READING_TIME__ minutes
ReactJSで関数コンポーネントとフックを使用する理由ReactJS
近年、React開発は関数コンポーネントとフックに大きくシフトしています関数コンポーネントとフックへの移行。まだプロジェクトでクラスコンポーネントを使用している場合は、アプローチの見直しが必要です。フックと組み合わせた関数コンポーネントを使用すると、コードがシンプルで、クリーンで、より効率的になります。
この記事では、一貫した例を使用して関数コンポーネントとフックの利点を説明し、React開発プロセスをアップグレードする方法を示します。
関数コンポーネントとは何か？
関数コンポーネントは、画面に要素をレンダリングするためにReactが使用するJSXを返すJavaScript関数です。クラスコンポーネントとは異なり、関数コンポーネントはよりシンプルで、ライフサイクルメソッドやthisキーワードのような不要なオーバーヘッドがありません。
2つのアプローチの簡単な比較：
クラスコンポーネント：
class SimpleComponent extends React.Component {
render() {
return < div >Welcome to the Glinteco! < / div >;
}
}
関数コンポーネント：
const MyComponent = () => {
return < div >Welcome to the Glinteco!< / div >;
};
ご覧のように、関数コンポーネントはよりクリーンで記述が容易です。これにより、状態やライフサイクルイベントを管理する必要がない単純なコンポーネントに最適です。
関数コンポーネントを使用する理由
1. シンプルで読みやすいコード
関数コンポーネントへの切り替えの主な理由の1つは、シンプルさです。関数コンポーネントはより簡潔で、thisやライフサイクルメソッドを管理する必要がありません。これにより、コードを理解しやすくなり、保守も容易になります。
カウンターコンポーネントを作成するとしましょう。関数コンポーネントを使用した場合は次のようになります。
const Counter = () => {
return (
< div >
< p >You clicked 0 times
< button >Click me < / button >
< / div >
);
};
このコンポーネントは、クラスベースのバージョンよりも既に理解しやすく、まだロジックを追加していません。
2. ボイラープレートの削減
関数コンポーネントを使用すると、コンストラクタ、ライフサイクルメソッド、thisなど、不要なコードを記述する必要がなくなります。つまり、記述するコードが少なくなり、保守が容易になります。
クラスコンポーネントと関数コンポーネントを使用して、カウンターに機能を追加してみましょう。クラスベースのバージョンを次に示します。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
< div >
< p >You clicked {this.state.count} times
< button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
< /button >
< / div >
);
}
}
それをフックを使用した関数バージョンと比較してみましょう。
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
< div >
< p >You clicked {count} times
< button onClick={() => setCount(count + 1)}>Click me
< / button >
< / div >
);
};
関数コンポーネントでは、ボイラープレートが少なくなり、useStateのようなフックを使用すると状態ロジックが理解しやすくなります。
フックの紹介：その強力な理由
Reactがフックを導入する前、関数コンポーネントは状態を管理したり、副作用を実行したりできませんでした。フックによって、関数コンポーネントはクラスコンポーネントができることをすべて実行できるようになりましたが、より柔軟で再利用可能な方法で行われます。
2つの一般的なフック、useStateとuseEffectを見てみましょう。
1. useStateを使用した状態の管理
上記の例では、useStateフックを使用してcount状態を管理しました。フックを使用すると、関数コンポーネント内で直接状態を管理できるため、クラスコンポーネントに切り替えることなく、状態のある動作を追加しやすくなります。
const [count, setCount] = useState(0)
useStateフックは、現在の状態（count）と、その状態を更新する関数（setCount）の2つの値を返します。このフックは、単一のコンポーネント内で必要な回数だけ使用できます。
2. useEffectを使用した副作用の処理
フックを使用すると、データのフェッチやDOM操作などの副作用を処理することもできます。これは、useEffectフックを使用して行われます。たとえば、countが変更されるたびにドキュメントのタイトルを更新してみましょう。
import { useEffect } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
< div >
< p >You clicked {count} times
< button onClick={() => setCount(count + 1)}>Click me < / button >
< / div >
);
};
この例では、useEffectはcountが変更されるたびにトリガーされ、それに応じてドキュメントのタイトルを更新します。2番目の引数[count]は、効果がcountが更新された場合にのみ実行されるようにします。
関数コンポーネントとフックを使用する利点
1. カスタムフックによる再利用可能なロジック
フックの最も強力な側面の1つは、ロジックをカプセル化し、複数のコンポーネントで再利用できるカスタムフックを作成できることです。これにより、コードがよりモジュール化され、保守が容易になります。たとえば、タイマーを処理したり、APIからデータを取得したりするカスタムフックを作成できます。
2. テストが容易
関数コンポーネントは単なるJavaScript関数であるため、テストが容易です。クラスメソッドを心配したり、thisを管理したりする必要はありません。コンポーネントの出力をテストし、フックの動作を確認するだけです。
3. パフォーマンスの向上
関数コンポーネントには、クラスコンポーネントのようなライフサイクルメソッドを管理するオーバーヘッドがないため、パフォーマンスが向上する傾向があります。フックを使用すると、コンポーネントの更新方法とタイミングをより細かく制御できるため、不要なレンダリングが減り、最適化が向上します。
4. 将来性のあるコード
Reactチームは、関数コンポーネントとフックをデフォルトのアプローチとして移行しています。クラスコンポーネントはまだサポートされていますが、フックはReactの将来を表しています。今すぐそれらを採用することで、Reactの進化に伴い、コードを最新の状態に保ち、アップグレードを容易にすることができます。
結論
関数コンポーネントとフックはReact開発の未来です。これらはコードを簡素化し、状態と副作用の管理を容易にし、パフォーマンスと再利用性を向上させます。関数コンポーネントに切り替えることで、より保守しやすいコードを作成するだけでなく、今後のReact機能に対応できるアプリケーションを作成できます。
まだ行っていない場合は、それらのクラスコンポーネントの修正を開始し、フックの力を利用しましょう！
