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

React では、入力フィールド、チェックボックス、テキストエリアなどのフォーム要素の管理は、制御されたコンポーネント または 非制御コンポーネント のいずれかを使用して実行できます。これら 2 つのアプローチは、フォーム データの処理と更新に異なる方法を提供します。React アプリケーションに適切な方法を選択するには、それらの違いを理解することが不可欠です。

1.制御コンポーネントとは何ですか?

制御コンポーネントでは、フォーム要素はReactコンポーネントの狀態(tài)によって制御されます。フォームデータは React の狀態(tài)を通じて管理され、ユーザーによる変更はコンポーネントの狀態(tài)に反映されます。 React コンポーネントは、フォーム データの「唯一の信頼できる情報源」として機能します。

制御されたコンポーネントの仕組み:

• フォーム要素 ( フィールドなど) の値は、コンポーネントの狀態(tài)によって制御されます。
• ユーザー入力によって onChange イベントがトリガーされ、親コンポーネントの狀態(tài)が更新されます。
• 狀態(tài)はフォーム要素に戻され、アプリケーションの狀態(tài)との同期が確保されます。

制御対象コンポーネントの例:

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>: 狀態(tài)は 1 か所 (React コンポーネント) で管理され、フォーム データの追跡と検証が容易になります。</li>
<li>
<strong>予測可能性</strong>: React の狀態(tài)が真実のソースであるため、フォーム要素は常に狀態(tài)と同期し、予測可能性が保証されます。</li>
<li>
<strong>簡単な検証</strong>: データはコンポーネントの狀態(tài)の一部であるため、入力値に基づいてリアルタイムのフォーム検証または條件付きレンダリングを?qū)g行できます。</li>
</ul>


<hr>

<h2>
  
  
  <strong>2.非制御コンポーネントとは何ですか?</strong>
</h2>

<p><strong>制御されていないコンポーネント</strong> では、フォーム要素は React の狀態(tài)ではなく DOM 自體によって管理されます。 React はフォーム要素の値を直接追跡しません。代わりに、<strong>refs</strong> (參照) を使用して DOM 要素にアクセスし、その現(xiàn)在の値を取得します。</p>
<h3>
  
  
  <strong>制御されていないコンポーネントの仕組み:</strong>
</h3>

<ul>
<li>フォーム要素の値は、React コンポーネントの狀態(tài)ではなく、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;

非制御コンポーネントの利點:

• 定型文の削減: フォーム要素の狀態(tài)を管理する必要がないため、特に多數(shù)のフィールドを持つフォームの場合、コードがよりクリーンかつシンプルになります。
• パフォーマンス: フォーム要素の値は React の狀態(tài)に保存されないため、多くの動的入力や複雑なフォームを含むシナリオでは、制御されていないコンポーネントの方がパフォーマンスが向上する場合があります。
• 単純な使用例ではより自然です: 非常に単純なフォームの場合、またはユーザーが入力中にフォーム データを操作する必要がない場合は、制御されていないコンポーネントがより簡単なソリューションになります。

3.制御コンポーネントと非制御コンポーネント: 主な違い

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

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

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

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

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

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

6.結(jié)論

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

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

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