React の制御コンポーネントと非制御コンポーネント: 適切なアプローチの選択
Jan 04, 2025 am 12:43 AMReact の制御コンポーネントと非制御コンポーネント: 違いを理解する
React では、入力フィールド、チェックボックス、テキストエリアなどのフォーム要素の管理は、制御されたコンポーネント または 非制御コンポーネント のいずれかを使用して実行できます。これら 2 つのアプローチは、フォーム データの処理と更新に異なる方法を提供します。React アプリケーションに適切な方法を選択するには、それらの違いを理解することが不可欠です。
1.制御コンポーネントとは何ですか?
制御コンポーネントでは、フォーム要素はReactコンポーネントの状態によって制御されます。フォームデータは React の状態を通じて管理され、ユーザーによる変更はコンポーネントの状態に反映されます。 React コンポーネントは、フォーム データの「唯一の信頼できる情報源」として機能します。
制御されたコンポーネントの仕組み:
- フォーム要素 (<input> フィールドなど) の値は、コンポーネントの状態によって制御されます。
- ユーザー入力によって onChange イベントがトリガーされ、親コンポーネントの状態が更新されます。
- 状態はフォーム要素に戻され、アプリケーションの状態との同期が確保されます。
制御対象コンポーネントの例:
import React, { useState } from 'react'; const ControlledForm = () => { const [inputValue, setInputValue] = useState(''); const handleChange = (e) => { setInputValue(e.target.value); // Update the state with the user input }; return ( <form> <input type="text" value={inputValue} // Value is controlled by React state onChange={handleChange} // Updates state on user input /> <button type="submit">Submit</button> </form> ); }; export default ControlledForm; <h3> <strong>制御されたコンポーネントの利点:</strong> </h3> <ul> <li> <strong>集中管理</strong>: 状態は 1 か所 (React コンポーネント) で管理され、フォーム データの追跡と検証が容易になります。</li> <li> <strong>予測可能性</strong>: React の状態が真実のソースであるため、フォーム要素は常に状態と同期し、予測可能性が保証されます。</li> <li> <strong>簡単な検証</strong>: データはコンポーネントの状態の一部であるため、入力値に基づいてリアルタイムのフォーム検証または条件付きレンダリングを実行できます。</li> </ul> <hr> <h2> <strong>2.非制御コンポーネントとは何ですか?</strong> </h2> <p><strong>制御されていないコンポーネント</strong> では、フォーム要素は React の状態ではなく DOM 自体によって管理されます。 React はフォーム要素の値を直接追跡しません。代わりに、<strong>refs</strong> (参照) を使用して DOM 要素にアクセスし、その現在の値を取得します。</p> <h3> <strong>制御されていないコンポーネントの仕組み:</strong> </h3> <ul> <li>フォーム要素の値は、React コンポーネントの状態ではなく、DOM に保存されます。</li> <li>ref は、DOM 要素に直接アクセスし、その値を取得または変更するために使用されます。</li> <li>オプションで <strong>onSubmit ハンドラー</strong> を使用して、フォームの送信時にデータを処理できます。</li> </ul> <h3> <strong>制御されていないコンポーネントの例:</strong> </h3> <pre class="brush:php;toolbar:false">import React, { useState } from 'react'; const ControlledForm = () => { const [inputValue, setInputValue] = useState(''); const handleChange = (e) => { setInputValue(e.target.value); // Update the state with the user input }; return ( <form> <input type="text" value={inputValue} // Value is controlled by React state onChange={handleChange} // Updates state on user input /> <button type="submit">Submit</button> </form> ); }; export default ControlledForm;
非制御コンポーネントの利点:
- 定型文の削減: フォーム要素の状態を管理する必要がないため、特に多数のフィールドを持つフォームの場合、コードがよりクリーンかつシンプルになります。
- パフォーマンス: フォーム要素の値は React の状態に保存されないため、多くの動的入力や複雑なフォームを含むシナリオでは、制御されていないコンポーネントの方がパフォーマンスが向上する場合があります。
- 単純な使用例ではより自然です: 非常に単純なフォームの場合、またはユーザーが入力中にフォーム データを操作する必要がない場合は、制御されていないコンポーネントがより簡単なソリューションになります。
3.制御コンポーネントと非制御コンポーネント: 主な違い
Feature | Controlled Components | Uncontrolled Components |
---|---|---|
State Management | Data is managed by React’s state. | Data is managed by the DOM, using refs. |
Data Flow | Value is passed as a prop and updated via state. | Value is accessed directly through the DOM. |
Form Validation | Easy to validate and control form data in real-time. | Validation is more complex and may require additional handling. |
Boilerplate Code | Requires more code to manage state and updates. | Less boilerplate code but requires refs for accessing form data. |
Performance | May be slower with a large number of form elements. | Faster for large forms or when you don’t need real-time data updates. |
Complexity | Offers more flexibility and control over form behavior. | Simpler and more straightforward for simple forms. |
4.制御されたコンポーネントをいつ使用するか?
次のような場合には、制御されたコンポーネントが推奨されます。
- フォーム データを動的に操作する必要があります (検証、条件付きレンダリングなど)。
- フォーム データのリアルタイム更新 (ライブ検索、フォーム検証など) が必要です。
- フォーム全体で複数の入力を管理し、検証する必要があります。
5.制御されていないコンポーネントをいつ使用するか?
制御されていないコンポーネントは、次の場合に適しています。
- リアルタイムの操作や検証を必要としないシンプルなフォームが用意されています。
- React でのフォーム データの処理の複雑さを軽減したいと考えています。
- パフォーマンスは重要であり、フォーム要素は動的に変更されたり、リアルタイムで操作されることは期待されていません。
6.結論
制御されたコンポーネントと制御されていないコンポーネントの両方が、React アプリケーション内で役割を果たします。制御されたコンポーネントは、より優れた制御性と予測可能性を提供し、最も複雑なフォームに最適です。ただし、基本的なフォームやデータのリアルタイム制御が必要ない場合には、非制御コンポーネントのほうがシンプルでパフォーマンス効率の高いソリューションになる可能性があります。
各タイプのコンポーネントをいつ使用するかを理解すると、特定の使用例に基づいて最適なアプローチを決定するのに役立ちます。
以上がReact の制御コンポーネントと非制御コンポーネント: 適切なアプローチの選択の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









