Reactの紹介と事例分析
リアクトとは？
React は、Facebook によって開発された、ユーザー インターフェイスを構築するための JavaScript ライブラリです。React は、そのコンポーネントベースのアイデア、強力なパフォーマンス最適化機能、簡潔で明確な文法構造で広く歓迎されています。
React のコアコンセプト
React の中心的な概念には、コンポーネント、状態 (State)、およびプロパティ (Props) が含まれます。コンポーネントは React アプリケーションの基本的な構成要素であり、再利用可能な UI 要素を構築するために使用されます。状態は、ユーザーの操作やその他のイベントに基づいて変化し、コンポーネントの再レンダリングをトリガーするコンポーネント内のデータです。プロパティは、親コンポーネントから子コンポーネントにデータを渡す方法です。
React の例: シンプルなカウンター アプリ
次の例は、React を使用して簡単なカウンター アプリを作成する方法を示しています。
まず、Counter というコンポーネントを作成します。コンポーネントのコードは次のとおりです。
import React, {
useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>计数器：{
count}</h2>
<button onClick={
() => setCount(count + 1)}>增加</button>
<button onClick={
() => setCount(count - 1)}>减少</button>
</div>
);
}
export default Counter;
このカウンター コンポーネントをページに表示するには、ルート コンポーネントに追加する必要があります。App.js ファイルの内容は次のとおりです。
import React from 'react';
import Counter from './Counter';
function App() {
return (
<div>
<h1>React 示例：计数器应用</h1>
<Counter />
</div>
);
}
export default App;
例の説明
この例では、最初に React ライブラリから useState フックをインポートします。useState は、機能コンポーネントで状態を作成するために使用されます。次に、Counter という機能コンポーネントを定義します。コンポーネント内では、useState を使用して count という状態変数を作成し、setCount という関数を使用して count の値を更新します。
コンポーネントの戻り値で、JSX 構文を使用して、タイトルと 2 つのボタンを含む div を作成します。タイトルには現在のカウント値が表示され、ボタンはそれぞれカウント値を増減するために使用されます。ボタンがクリックされると、setCount 関数を呼び出して、カウントを 1 つインクリメントまたはデクリメントします。
最後に、別の場所で使用するために Counter コンポーネントをエクスポートします。App.js ファイルで、Counter コンポーネントをインポートし、それをアプリケーションのルート コンポーネントに追加します。
この単純なカウンター アプリは、コンポーネント、状態、イベント処理などの基本的な React の概念を示しています。これらの概念を学び実践することで、より複雑な React アプリケーションの構築を開始できます。
React のライフサイクル メソッドとフック
React では、コンポーネントのさまざまな段階で特定のアクションを実行する必要がある場合があります。これを実現するために、React はライフサイクル メソッドとフックを提供します。
クラス コンポーネントでは、一般的なライフサイクル メソッドは次のとおりです。
- componentDidMount(): コンポーネントがマウントされた後に実行されるメソッド。
- componentDidUpdate(): コンポーネントが更新された後に実行されるメソッド。
- componentWillUnmount(): コンポーネントがアンマウントされる前に実行されるメソッド。
関数コンポーネントでは、フック (useEffect など) を使用して同様の関数を実現できます。useEffect は、コンポーネントのマウント、更新、アンマウント時に特定のアクションを実行できます。これは、使用方法を示す簡単な例です
この例では、ページが読み込まれてから経過した秒数を表示する Timer という機能コンポーネントを作成します。useState を使用して seconds という状態変数を作成し、setSeconds という関数を使用して秒の値を更新します。
コンポーネントのマウント時にタイマーを作成し、1000 ミリ秒 (1 秒) ごとに秒の値を更新する useEffect フックも使用します。同時に、コンポーネントがアンロードされると、useEffect の return 関数がタイマーをクリアして、メモリ リークを防ぎます。
アプリケーションでこの Timer コンポーネントを使用するには、ルート コンポーネントに追加します。以下は、更新された App.js ファイルの内容です。
import React from 'react';
import Counter from './Counter';
import Timer from './Timer';
function App() {
return (
<div>
<h1>React 示例</h1>
<Counter />
<Timer />
</div>
);
}
export default App;
Timer コンポーネントを App.js ファイルに追加することで、カウンター アプリとタイマーの両方をページに表示できるようになりました。
この例では、React ライフサイクル メソッドとフックの基本的な使用方法を示します。これらの概念を習得すると、さまざまな段階でコンポーネントの動作を管理し、パフォーマンスを最適化し、コードの読みやすさを向上させることができます。