プロのように React コンポーネントを書く: ゼロからヒーローまでの初心者ガイド
React は、ユーザー インターフェイスを構築するための最も人気のある JavaScript ライブラリの 1 つです。初心者でも経験豊富な開発者でも、コンポーネントの作成と強化の技術を習得することが、スケーラブルなアプリケーションを構築する鍵となります。このガイドでは、React コンポーネントの作成、高次コンポーネント (HOC) によるコンポーネントの強化、データ取得のためのフックの使用、副作用の制御について知っておくべきことをすべて説明します。最後には、プロのように React アプリケーションを構築して構造化できるようになります。
React コンポーネントは、本質的には、JSX (JavaScript の構文拡張) を使用して UI 要素を出力する JavaScript 関数またはクラスです。コンポーネントを使用すると、UI を独立した再利用可能な部分に分割できます。
簡単な機能コンポーネントの例を次に示します。
import React from 'react';
function WelcomeMessage() {
return <h1>Welcome to React</h1>;
}
export default WelcomeMessage;
コンポーネントが重要な理由: コンポーネントは、React アプリケーションの構成要素です。これらは、複雑な UI をより小さく管理しやすい部分に分割するのに役立ちます。
HOC とは何ですか?
高次コンポーネントは、コンポーネントを受け取り、新しい拡張コンポーネントを返す関数です。 HOC は、複数のコンポーネント間でロジックを再利用するために使用されます。
ログ機能を追加する HOC の例を次に示します。
function withLogging(WrappedComponent) {
return function EnhancedComponent(props) {
console.log('Component is rendering with props:', props);
return <WrappedComponent {...props} />;
};
}
// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);
この例では、withLogging HOC は WelcomeMessage コンポーネントをラップし、コンポーネントがレンダリングされるたびに props をログに記録します。これにより、元のコンポーネントを変更せずに、ログ記録や認証チェックなどの追加機能で既存のコンポーネントを強化できます。
React の組み込みフックを使用すると、状態およびライフサイクル機能を機能コンポーネントに追加できます。データを取得するための最も重要なフックの 1 つは useEffect です。
データの取得例:
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
});
}, []);
if (loading) {
return <div>Loading...</div>;
}
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}
export default DataFetcher;
以下のことが起こります:
フックが重要な理由: useState や useEffect のようなフックを使用すると、特に機能コンポーネントにおいて、状態と副作用 (データのフェッチなど) の管理がはるかに簡単になります。
React の useEffect フックは、API 呼び出し、タイマー、手動の DOM 操作などの副作用を処理するために重要です。
クリーンアップなしの影響:
すべてのエフェクトがクリーンアップを必要とするわけではありません。たとえば、コンポーネントのマウント時にデータを取得する場合、クリーンアップは必要ありません。これらのタイプの操作には useEffect を使用できます。
import React from 'react';
function WelcomeMessage() {
return <h1>Welcome to React</h1>;
}
export default WelcomeMessage;
空の配列 ([]) は、このエフェクトが 1 回だけ実行されることを保証し、componentDidMount の動作を模倣します。
クリーンアップによる効果:
サブスクリプションやタイマーの設定などの特定の副作用では、メモリ リークを避けるためにコンポーネントがアンマウントされるときにクリーンアップが必要です。
例:
function withLogging(WrappedComponent) {
return function EnhancedComponent(props) {
console.log('Component is rendering with props:', props);
return <WrappedComponent {...props} />;
};
}
// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);
この例では、useEffect 内にタイマーを設定し、コンポーネントがアンマウントされたときに間隔をクリアするクリーンアップ関数を返します。
クリーンアップが重要な理由: クリーンアップを行わないと、コンポーネントが存在しなくなった後でもサブスクリプションや間隔などの効果が実行され続ける可能性があり、パフォーマンスの問題が発生する可能性があります。
構成要素を確認したので、データを取得し、コンポーネントのレンダリングをログに記録し、データを表示する小さなアプリを組み立ててみましょう。
import React, { useState, useEffect } from 'react';
function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((data) => {
setData(data);
setLoading(false);
});
}, []);
if (loading) {
return <div>Loading...</div>;
}
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
}
export default DataFetcher;
この例では:
JSX とは何ですか?
JSX は、HTML に似た JavaScript の構文拡張機能です。これにより、JavaScript 内に UI 要素を記述することができます。
useEffect を使用する理由
useEffect を使用すると、データのフェッチや機能コンポーネントでの DOM の操作などの副作用を処理できます。
高次コンポーネント (HOC) とは何ですか?
HOC は、コンポーネントを取得して拡張コンポーネントを返す関数であり、コンポーネント ロジックを再利用できます。
このガイドでは、React コンポーネントを作成する際にゼロからヒーローになるために必要なすべてをカバーしました。基本コンポーネントの理解から、高次コンポーネントによるそれらの強化、useEffect による副作用の管理まで、スケーラブルで再利用可能なコンポーネントを構築するための強力な基盤が得られました。練習すると、これらの概念をマスターし、より高度な React アプリケーションを処理できるようになります。コーディングを続けてください!
以上がプロのように React コンポーネントを書く: 初心者向けのブループリントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
