制御されていないコンポーネントに反応するとはどういう意味ですか?

react では、非制御コンポーネントは、その親コン​​ポーネントによって制御されないコンポーネントです。非制御コンポーネントは、値を渡す必要がなく、親コンポーネントとの交差を持たない独立したコンポーネントです。コンポーネントをカプセル化する場合、現在のコンポーネントが表示のみを目的としており、何の違いも生じない場合にのみ、非制御コンポーネントとしてカプセル化されます。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react uncontrolled コンポーネントとはどういう意味ですか?

uncontrolled コンポーネントとは

2 つの単語から始めます。つまり、コンポーネント、サブジェクトです。 Controlled と Uncontrolled は、コンポーネントの観点から見た概念です。文字通りの意味は、コンポーネントは制御されていないということです。コンポーネントは誰にも制御されていません。もちろん、親コンポーネントによって制御されていません。では、制御されていないコンポーネントの特徴は何ですか?つまり、すべてですロジックはそれ自体にのみ関連しており、他のコンポーネントとの通信や交差はありません。

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(&#39;content&#39;))

非制御コンポーネントの説明

非制御コンポーネントは外界とのつながりを持たないコンポーネントであるため、交差するコンポーネントは存在しません。制御されていないコンポーネントを使用できます。答えはノーです。特定の状況では、実際には制御されていないコンポーネント (制御されていないコンポーネント) の

カルーセル コンポーネントを使用します。制御されている)、ページにカルーセル コンポーネントが必要かどうかを考えてください。コンポーネントは 1 回だけ使用され、再利用することは意図されていません。カルーセル コードをカルーセル コンポーネントに配置します。カルーセル コンポーネントは外部と対話する必要がありますか? いいえ、作成したカルーセル コンポーネントがハードコーディングされている場合は、クリック イベント、カルーセル時間、その他の条件を含め、現在のカルーセル画像がどのように実行されるかに関係なく、カルーセル コンポーネントは制御されないコンポーネントです。もちろん、この例は少し突飛です。コンポーネントを作成するときは、ユニバーサルなコンポーネントが必要です。再利用可能なコンポーネント。カルーセルの現在のステータスを知る必要があります。これにより、制御されていないコンポーネントが適用できなくなります。

静的ページ開発。静的ページを開発するとき、通常はフレームワークを使用せず、フレームワークのみを使用します。ファイルを個別に記述するための HTML。パッケージ化後のパフォーマンスは向上する可能性がありますが、プロジェクト内の特定のページが静的ページである場合、使用する必要があります。制御されていないコンポーネントに関しては、表示されるページにはカプセル化がなく、カスタマイズされたページのみが可能です次に、ページ コンポーネントが単独で存在する場合、それらは非制御コンポーネントになります

非制御コンポーネントは、値を渡す必要がなく、現在のコンポーネントの親コンポーネントと交差しない独立したコンポーネントです。コンポーネントをカプセル化します。現在のコンポーネントが表示目的のみであり、違いがない場合にのみ使用されます。制御されていないコンポーネントとしてカプセル化されます

#拡張知識:

制御コンポーネントとは

#これは、制御されていないコンポーネントとは対照的に、親コンポーネントによって制御されるコンポーネントを制御コンポーネントと呼びます。 #親コンポーネントが子コンポーネントをどのように制御するかはもちろん渡されます 値が制御され、propsの値が子コンポーネントで使用され、その値によって子コンポーネントの内容やメソッド、表示結果が変更される場合親コンポーネントによって渡された場合、子コンポーネントは親コンポーネントによって制御される制御コンポーネントです

Example

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class Input extends Component{
    constructor(){
        super();
        this.state = {val:''};
    }
    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({val})
    }
    render(){
        return (
            <div>
                <p>{this.state.val}</p>
                //<input type="text" value=&#39;123&#39; />
                <input type="text" value={this.state.val} onChange={this.handleChange} /> //input就是受控组件 被状态对象的属性控制
            </div> 
        )
    }
}
ReactDOM.render(<Input/>,window.app)

入力を入力コンポーネントとは考えません。私たちが参照またはカプセル化する任意のコンポーネントと同じです. このコンポーネントが私たちによって値を渡されるとき, それが私たちによって修正されたとしても, 文字列は依然として本質的に制御されたコンポーネントです. 制御されたコンポーネントはデータの双方向バインディングがあるかどうかを調べません,

制御コンポーネントの説明

## 対象となる制御コンポーネントは、実際にはプログラミングのあらゆる側面に現れます。コンポーネントだけを取り出すと、ほとんどの場合、制御コンポーネントとなります。静的ページの需要はまだ小さいです。私たちの JS は、ほとんどの場合ロジックを処理します。ロジックはインタラクティブである必要があります。

たとえば、上記の入力コンポーネント コードは、テキストエリアおよび選択コンポーネントと同等です。私たちは皆、次のことを行う必要があります。特定のレンダリング ルールを通知し、コンポーネントのコンテンツを表示するために、いくつかのパラメーター (小道具) を渡します。たとえば、 type 属性は、コンポーネントの制御に使用する データの双方向バインディングでもあります。 、任意の値または属性を value に渡すとき、コンポーネントの意味はすでに制御されたコンポーネントに変更されていますが、onChange をバインドすると、onChange はデータが変更されたときにコンポーネントにコールバック メソッドを与えます。 setState を介してデータを使用してレンダーを再レンダリングします。これはデータの双方向バインディングです。はい、データ駆動型ビュー、ビュー駆動型データ

要約: 制御コンポーネントと非制御コンポーネントとは、現在のコンポーネントが制御されているかどうか、他のコンテンツとの相互作用を持たない別個のコンポーネントであるかどうかを示す概念であり、簡単に言うと、完全に独立したコンポーネントであるとみなすことができます。非制御コンポーネントとして、およびその他の制御コンポーネントとして

#[関連する推奨事項:

JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上が制御されていないコンポーネントに反応するとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。