React の制御コンポーネントと非制御コンポーネント: 適切なアプローチの選択

React の制御コンポーネントと非制御コンポーネント: 違いを理解する

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 = () =&gt; {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) =&gt; {
    setInputValue(e.target.value);  // Update the state with the user input
  };

  return (
    &lt;form&gt;
      &lt;input 
        type="text" 
        value={inputValue}       // Value is controlled by React state
        onChange={handleChange}   // Updates state on user input
      /&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
};

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.

状態管理 データは React の状態によって管理されます。 データは、refs を使用して DOM によって管理されます。 データ フロー 値はプロパティとして渡され、状態を介して更新されます。 値は DOM を通じて直接アクセスされます。 フォームの検証 フォーム データをリアルタイムで簡単に検証および制御できます。 検証はより複雑であり、追加の処理が必要になる場合があります。 定型コード 状態と更新を管理するにはさらに多くのコードが必要です。 定型コードは少ないですが、フォーム データにアクセスするための参照が必要です。 パフォーマンス フォーム要素の数が多いと速度が遅くなる可能性があります。 大きなフォームの場合、またはリアルタイムのデータ更新が必要ない場合は高速になります。 複雑さ フォームの動作の柔軟性と制御が向上します。 単純なフォームの場合、よりシンプルかつ簡単です。 テーブル>

---

4.制御されたコンポーネントをいつ使用するか?

次のような場合には、制御されたコンポーネントが推奨されます。

• フォーム データを動的に操作する必要があります (検証、条件付きレンダリングなど)。
• フォーム データのリアルタイム更新 (ライブ検索、フォーム検証など) が必要です。
• フォーム全体で複数の入力を管理し、検証する必要があります。

---

5.制御されていないコンポーネントをいつ使用するか?

制御されていないコンポーネントは、次の場合に適しています。

• リアルタイムの操作や検証を必要としないシンプルなフォームが用意されています。
• React でのフォーム データの処理の複雑さを軽減したいと考えています。
• パフォーマンスは重要であり、フォーム要素は動的に変更されたり、リアルタイムで操作されることは期待されていません。

---

6.結論

制御されたコンポーネントと制御されていないコンポーネントの両方が、React アプリケーション内で役割を果たします。制御されたコンポーネントは、より優れた制御性と予測可能性を提供し、最も複雑なフォームに最適です。ただし、基本的なフォームやデータのリアルタイム制御が必要ない場合には、非制御コンポーネントのほうがシンプルでパフォーマンス効率の高いソリューションになる可能性があります。

各タイプのコンポーネントをいつ使用するかを理解すると、特定の使用例に基づいて最適なアプローチを決定するのに役立ちます。

以上がReact の制御コンポーネントと非制御コンポーネント: 適切なアプローチの選択の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。