Reactで制御されていないコンポーネントをどのように作成しますか？-フロントエンドQ&A-php.cn

Reactで制御されていないコンポーネントをどのように作成しますか？

Reactの制御されていないコンポーネントは、コンポーネントの状態によって管理される代わりに、フォームデータがDOM自体によって処理されるものです。制御されていないコンポーネントを作成するには、次の手順に従います。

defaultValue Prop ：form form elementの初期value （制御する）を設定する代わりに、 defaultValue使用します。たとえば、入力フィールドの場合、次のことを行います。
```
 <code class="jsx"><input type="text" defaultvalue="Initial Value"></code>
```
ログイン後にコピー
変更に関する状態を設定しないでください：制御されたコンポーネントでは、各変更イベントで状態を更新します。制御されていないコンポーネントの場合、これは行いません。 DOMに変更を内部的に処理させます。

REFを介してデータへのアクセス：データはReactの状態によって管理されていないため、必要に応じて現在の値にアクセスする方法が必要です。 Reactのrefシステムを使用して、DOMノードへの参照を作成します。これがあなたのやり方です：

 <code class="jsx">class UncontrolledForm extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } render() { return ( <form onsubmit="{this.handleSubmit}"> <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> <button type="submit">Submit</button> </form> ); } }</code>

ログイン後にコピー

これらの手順に従うことにより、フォームデータがDOMによって直接処理されるReactで制御されていないコンポーネントを作成できます。

Reactアプリケーションで制御されていないコンポーネントを使用することの利点は何ですか？

Reactアプリケーションで制御されていないコンポーネントを使用するには、いくつかの利点があります。

実装が簡単：制御されていないコンポーネントは、州の管理と変更ハンドラーの実装を必要としないため、セットアップが簡単です。これにより、シンプルなフォームや、反応する新しい開発者に適しています。
ボイラープレートの少ないコード：制御されていないコンポーネントは、状態を更新するために州の管理とイベントハンドラーを必要としないため、通常、コードが少なくなります。これにより、アプリケーションの読み取りと保守が容易になります。
パフォーマンスの向上：DOMが変更を直接処理できるようにすることにより、一部のシナリオでより良いパフォーマンスを実現できます。これは、各キーストロークが状態の更新と再レンダリングをトリガーしない大きなフォームまたは複数の入力フィールドを処理するのに特に便利です。
非反応コードとの互換性：既存の非反応コードとの反応を統合している場合、反応固有の状態管理システムを必要としないため、制御されていないコンポーネントはより簡単に操作できます。
単純なユースケースに役立つ：迅速なプロトタイピングまたは単純なユースケースの場合、制御されていないコンポーネントは、複雑な国家管理を必要とせずに実装するのがより簡単かつ高速になる可能性があります。

Reactの制御されていないコンポーネントの値にどのようにアクセスできますか？

Reactの制御されていないコンポーネントの値にアクセスするには、通常、 refシステムを使用します。これがあなたがそれを行う方法です：

REF：CREATE ：コンポーネントで、 React.createRef()または機能コンポーネントのuseRefフックを使用してrefを作成します。

 <code class="jsx">// In a class component constructor(props) { super(props); this.inputRef = React.createRef(); } // In a functional component const inputRef = useRef(null);</code>

ログイン後にコピー

REFをDOM要素に添付します。フォーム要素をレンダリングするときは、 refを渡します。

 <code class="jsx">// Class component <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> // Functional component <input type="text" defaultvalue="Initial Value" ref="{inputRef}"></code>

ログイン後にコピー

値へのアクセス：フォームの提出やその他のイベントなど、必要に応じて、制御されないコンポーネントの値にアクセスできます。 ref.current.valueを使用して、現在の値を取得します。

 <code class="jsx">// In a class component handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } // In a functional component const handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', inputRef.current.value); }</code>

ログイン後にコピー

これらの手順に従うことにより、Reactの制御されていないコンポーネントの値に効果的にアクセスできます。

React開発において制御されたコンポーネントよりも制御されていないコンポーネントをいつ選択する必要がありますか？

制御されたコンポーネントと制御されていないコンポーネントを選択することは、プロジェクトの特定のニーズと複雑さによって異なります。制御されていないコンポーネントを好むかもしれないシナリオを次に示します。

シンプルなフォーム：フォームデータを細かく制御する必要がない単純なフォームの場合、制御されていないコンポーネントの実装がより簡単かつ高速になります。
迅速なプロトタイピング：プロトタイプまたは迅速な開発の場合、制御されていないコンポーネントは、セットアップが少ないため、時間がかかりません。
非反応コードとの統合：Reactを使用しない既存のアプリケーションにReactを統合している場合、制御されていないコンポーネントは、従来のDOM操作とより密接に整合するため、操作しやすい場合があります。
パフォーマンスの懸念：パフォーマンスが重要であるアプリケーションでは、特に大きなフォームでは、制御されていないコンポーネントがすべての変更で再レンダーをトリガーしないため、パフォーマンスが向上する可能性があります。
レガシーコードのメンテナンス：既に制御されていないコンポーネントを使用している既存のコードを使用している場合は、一貫性とメンテナンスの容易さのために同じパターンに固執する方が簡単かもしれません。
状態管理が不要な場合：フォームデータをReactの状態で管理する必要がない場合（たとえば、単純な検索入力の場合）、制御されていないコンポーネントはより簡単になります。