React では、非制御コンポーネントは、親コンポーネントによって制御されないコンポーネントです。非制御コンポーネントは、値を渡す必要がなく、カプセル化するときに現在のコンポーネントの親コンポーネントと交差しない独立したコンポーネントです。コンポーネント、のみ 現在のコンポーネントは、表示目的のみに使用され、何の違いも生じない場合、非制御コンポーネントとしてカプセル化されます。
このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。
制御されていないコンポーネントとは何ですか?
まず、コンポーネントという 2 つの単語から始めます。コントロールされているものとコントロールされていないものは、コンポーネントの観点から見た概念です。文字通りの意味は、コンポーネントは制御されておらず、もちろん親コンポーネントによっても制御されていないということです。制御されていないコンポーネントの特性とは? つまり、すべてのロジックはそれ自体にのみ関連しており、他のコンポーネントとの通信や交差はありません。
HTML では、 、 、 などのフォーム要素が独自の状態を維持し、ユーザー入力に基づいて更新されます。しかし、React では、これらのコンポーネントはすべて処理を行わない制御されていないコンポーネントです。実際に使用すると、これらのコンポーネントは何も処理せずに入力した値が自動的に更新されないことがわかります。
例
import React, { Component } from 'react';import ReactDOM from 'react-dom';class Demo1 extends Component { render() { return ( <input /> //<ABC /> ) }}ReactDOM.render(<Demo1 />、document.getElementById('content'))非管理コンポーネントの説明
非制御コンポーネントは外部と交わらないコンポーネントであるため、非制御コンポーネントは使用できなくなります。実際には、特定の状況では非制御コンポーネントを使用できます。
カルーセル コンポーネント (制御されていない)。ページにカルーセル コンポーネントが必要かどうかを考えてください。そのコンポーネントは 1 回だけ使用され、再利用することは意図されていません。カルーセル コンポーネントにカルーセル コンポーネントが必要ですか。外部と対話する必要がないため、クリック イベント、カルーセル時間、その他の条件など、現在のカルーセル グラフの実行方法に関係なく、作成するカルーセル コンポーネントがハードコーディングされている場合、そのカルーセル コンポーネントは制御されないコンポーネントになります。もちろん、この例は少し突飛です。コンポーネントを作成するときは、カルーセルの現在のステータスを知る必要があります。そのため、制御されていないコンポーネントは適用できなくなります。
静的ページの開発: 静的ページを開発する場合、通常はフレームワークを使用せず、HTML を使用して別のファイルを作成します。しかし、プロジェクト内の特定のページが静的ページの場合、それを使用するでしょうか。非制御コンポーネントによって表示されるページにはカプセル化がなく、ページ コンポーネントが単独で存在する場合、それらは非制御コンポーネントとなります。
非制御コンポーネントは、値を渡す必要がなく、現在のコンポーネントの親コンポーネントとの交差を持たない独立したコンポーネントであり、コンポーネントをカプセル化するときに、現在のコンポーネントが表示目的のみである場合にのみ使用されます。制御されていないコンポーネントとしてカプセル化されることに違いはありません。
知識を広げてください:
制御コンポーネントとは何ですか?
これは、非制御コンポーネントの逆で、文字通り親コンポーネントによって制御されるコンポーネントを意味します。制御コンポーネントと呼ばれます。
親コンポーネントが子コンポーネントをどのように制御するかは、props 値が子コンポーネントによって使用され、親コンポーネントによって渡された値によって子コンポーネントのコンテンツ、メソッド、または表示結果が変更される場合、値を渡すことによって制御されます。 、子コンポーネントは、親コンポーネントによって制御される制御コンポーネントです。
例
import React,{Component} from 'react';import ReactDOM from 'react-dom';class 入力は Component{constructor(){super(); this.state = {val:''} }; =>{ let val =event.target.value; this.setState({val}) } render(){ return ( <div> <p>{this.state.val}</p> //<input type= "text" value='123' /> <input type="text" value={this.state.val} onChange={this.handleChange} /> //入力は状態オブジェクトのプロパティによって制御される制御コンポーネントです</ div> ) }}ReactDOM.render(<Input/>,window.app)input を入力コンポーネントと見なすべきではありません。このコンポーネントが値を渡された後は、たとえそれが渡された固定文字列であっても、本質的にはそのままです。入力コンポーネントと同様に、制御コンポーネントはデータの双方向バインディングがあるかどうかではなく、本質的に制御されているかどうかを確認します。固定値を渡すと、入力コンポーネントの値は固定されます。 props はハードコーディングされた値を渡しますが、この値は依然として入力コンポーネントを制御します。
規制対象品の説明
制御されたコンポーネントは、実際にはプログラミングのあらゆる側面に現れます。結局のところ、静的ページの需要はまだ小さく、ほとんどの場合、js がロジックを処理します。インタラクティブである必要があります。
たとえば、上記の入力コンポーネント コードは textarea および select コンポーネントに相当し、特定のレンダリング ルールを通知し、コンポーネントのコンテンツを表示するためにいくつかのパラメーター (小道具) を渡す必要があります。コンポーネントを制御するためです。
データの双方向バインディング: 実際、任意の値または属性を value に渡すと、コンポーネントの意味は制御されたコンポーネントに変更されますが、onChange をバインドすると、データ変更は onChange を通じてコンポーネントに与えられます。コールバック メソッドでは、setState を介してデータを変更して再レンダリングします。これは、データがビューを駆動し、ビューがデータを駆動します。
概要: 制御コンポーネントと非制御コンポーネントは、現在のコンポーネントが制御されているかどうか、および他のコンテンツと相互作用しない別個のコンポーネントであるかどうかを示す概念です。簡単に言うと、完全に独立したコンポーネントは、他のすべてのコンポーネントが制御されていないコンポーネントと見なされます。コンポーネントが制御されている