React の制御されたコンポーネントインスタンスと制御されていないコンポーネントインスタンスの詳細な説明-jsチュートリアル-php.cn

React の制御されたコンポーネントインスタンスと制御されていないコンポーネントインスタンスの詳細な説明

小云云

リリース： 2018-01-29 13:22:45

オリジナル

1815 人が閲覧しました

この記事では、React の制御コンポーネントと非制御コンポーネントの例について詳しく説明します。詳細な説明の前に、制御コンポーネントと非制御コンポーネントとは何かを簡単に紹介します。

制御されたコンポーネント

React では、フォームの状態が変化するたびに、コンポーネントの状態に書き込まれます。このタイプのコンポーネントは、React では 制御されたコンポーネント と呼ばれます。制御されたコンポーネントでは、コンポーネントのレンダリング状態はその値またはチェックされた状態に対応します。 React はこの方法でコンポーネントのローカル状態を排除します。 React は、制御されたコンポーネントの使用を公式に推奨しています。

制御されたコンポーネントの状態更新プロセス:

1. 可以通过在初始state中设置表单的默认值。
2. 每当表单的值发生变化时，调用onChange事件处理器。
3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。
4. setState触发视图的重新渲染，完成表单组件值得更新。

ログイン後にコピー

非制御コンポーネント

簡単に言うと、フォームコンポーネントに値プロパティ(ラジオボタンとチェックボックスはチェックされたプロパティに対応します)がない場合、それを制御されていないコントロールコンポーネントと呼ぶことができます。このようにして、defaultValue と defaultChecked を使用してコンポーネントのデフォルトの状態を表すことができます。

React では、制御されていないコンポーネントはアンチパターンです。その値は、コンポーネント自体の状態や props によって制御されません。通常、レンダリングされた基になる DOM 要素にアクセスするには、ref prop を追加する必要があります。

制御されたコンポーネントと制御されていないコンポーネントの比較

フォームのデフォルト値がdefaultValueまたはdefaultCheckedを通じて設定されることを確認しました。これは一度だけレンダリングされ、それ以降のレンダリングでは機能しません。

<input
    value={this.state.value}
    onChange={(e) => this.setState({value: e.target.value})}
>

<input 
    defaultValue={this.state.value}
    onChange={e => {this.setState({value: e.target.value})}}
>

ログイン後にコピー

制御されたコンポーネントでは、本に入力された内容は出力および表示できますが、制御されていないコンポーネントでは、onChange イベントがバインドされていない場合、テキストボックスに入力した内容は表示されません。制御されたコンポーネントと制御されていないコンポーネントの最大の違いは、制御されていないコンポーネントの状態がアプリケーションの状態によって制御されないことです。アプリケーションにはローカルコンポーネントの状態も存在し、制御されたコンポーネントの値はその状態から取得されるということがわかります。。

パフォーマンスの問題

制御されたコンポーネントでは、フォームの値が変更されるたびに onChange タイムプロセッサが呼び出され、パフォーマンスがある程度消費されるため、React 制御コンポーネントでの使用は依然として推奨されません、この問題は、状態の統合を実現する redux アプリケーションアーキテクチャによって解決できます。