反応制御コンポーネントと非制御コンポーネントの詳細な説明

この記事では主に React の制御コンポーネントと非制御コンポーネントについての簡単な説明 (概要) を紹介し、参考にさせていただきます。

d5fd7aea971a85678ba271703566ebfd、221f08282418e2996498697df914ce4e、または現在使用しているリッチ テキスト エディターなど、ユーザーの操作によって変更できる Web コンポーネントが多数あることは誰もが知っています。これらのコンポーネントは日常の開発ではあまり目立ちませんが、コンテンツを入力したり、要素の value 属性を設定したりすることで、コンポーネントの値を簡単に変更できます。ただし、React は一方向のデータ フローに束縛されているため、これらのコンポーネントは制御不能になる可能性があります。

1. 値を独自の状態に保持する 1b21f8cd5dbc4311f0c5cf6129ec790b コンポーネントは、外部コントロールを通じてのみ更新できます。

最近、Ant Financial によって作成された React ベースの ant-design UI コンポーネントを使用しているときに問題が発生しました。ページを編集すると、保存する前に入力ボックスにデータが表示されますが、defaultValue を使用すると入力ボックスが常に機能しません。渡された特定の値の代わりに null 値。特定の編集ページのテキスト ボックスに関連するコードは次のとおりです。

    ... //render方法上面的内容省略
 <FormItem
   label="问题描述："
   hasFeedback
   {...props.formItemLayout}
 >
  <Input type="textarea" defaultValue={props.value}/>
</FormItem>
      //render下面的内容省略
      ...

コード セグメントが属するコンポーネントに value props を渡した後、テキスト ボックスのデフォルト値は常に空になります。ページが見つかり、値に対応する状態 初期値は空であるため、後続の非同期リクエストが成功した後に値に対応する状態の値が変更され、依然として空として表示されます。

具体的な理由をGoogleで調べてみると、ReactのフォームコンポーネントでdefaultValueが渡されると、それ以降のdefaultValueへの変更は効果がなく、無視されることがわかります。

具体的には、これは制御されていない反応コンポーネントであり、その状態は入力反応内で制御され、呼び出し元によって制御されません。これは、制御されたコンポーネントを使用して実現できます。

この制御コンポーネントと非制御コンポーネントについて説明します。これらはすべて、react のフォームコンポーネント要素に基づいています。詳細については、この紹介についての 公式 Web サイトを参照してください

制御コンポーネント

フォームに関しては、制御コンポーネントはフォームフォームコンポーネントに value 属性を追加するもので、非制御コンポーネントは value 属性が追加されていないコンポーネントです。制御コンポーネントの形式は次のとおりです:

render: function() {
  return <input type="text" value="Hello!" />;
 }

フォームコンポーネントの内部value 属性が追加された要素は、コンポーネントの値が特定の値に設定されると、それ自体の状態を維持しないため、呼び出し元はコンポーネントの値の変更を制御する必要があります。

この書き方では問題が発生します。レンダリングされた入力コンポーネントのユーザー操作中は、ユーザーが入力した値は機能せず、入力ボックスの値は常に Hello! になります。これは、HTML での入力の動作と矛盾します。

このため、コンポーネントを制御するには、入力コンポーネントの値を制御できる必要があります。つまり、コンポーネントと連携するためにコンポーネント内で状態を維持する必要があります。入力コンポーネントの onChange メソッドと setState メソッドを使用して、コンポーネントの制御を完了します。たとえば、上記のフォームは、内部で状態を維持する inputItem コンポーネントでカプセル化できます。このようにして、InputItem コンポーネントは次のように外部から呼び出すことができます:

 export default class InputItem extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      value: ""
    }
  }

  componentWillReceiveProps(nextProps){
    this.setState({
      value: nextProps.value
    })
  }

  _onChange(evt){
    this.setState({
      value: evt.target.value
    })
  }

  render(){
    return (
      <input type="text" 
        value={this.state.value} 
        onChange={this._onChange.bind(this)}/>
    );
  }
}

この方法で、react の入力を制御できます。ステートフル コンポーネントは内部的に状態を維持できるため、コンポーネントは実際には、react のステートフル コンポーネントの助けを借りて完了する必要があります。

非制御コンポーネント

表現の観点から言えば、value 属性を追加しない React のフォームコンポーネント要素は、非制御コンポーネントです。式は次のとおりです。

<InputItem value={this.state.userName} />

制御されていないコンポーネントは、基礎となる実装中に内部的に独自の状態を維持します。これは、ユーザーが入力した任意の値が要素に反映される可能性があることを示しています。

概要

React コンポーネントを使用する場合、制御されたコンポーネントと制御されていないコンポーネントが発生します。現時点では、React コンポーネントにはステートレス コンポーネントを使用することが推奨されていますが、このフォームを使用して React コンポーネントを実装する場合は、制御されていないコンポーネントを使用してください。制御された要素を制御する必要がある場合は、次のような問題が発生します。 `制御コンポーネント` は内部状態を積極的に維持する必要がありますが、`ステートレス コンポーネント` は内部状態を維持する必要がありません。コンポーネントの状態、この 2 つの間に矛盾があります。

そのため、ステートレス コンポーネントを使用して制御された要素を作成することはできません。

制御されたコンポーネントと制御されていないコンポーネントの特性を考慮すると、この 2 つのアプリケーション領域も主に次の点で異なります。

制御された要素は通常、初期値を動的に設定する必要がある状況で使用されます。たとえば、フォームのフォーム情報を編集する場合、入力フォーム要素は、最初にサーバーから返された特定の値を表示してから、それを編集する必要があります。

1. 非制御要素は、通常、動的な初期値情報がない場合に使用されます。たとえば、フォームに情報を作成する場合、入力フォーム要素には初期値がなく、ユーザー入力が必要です

2. 上記は私がコンパイルしたものです皆様、今後も皆様のお役に立てれば幸いです。

関連記事:

webpack 4.0.0-beta.0 バージョンの新機能 (詳細なチュートリアル)

Vue コンポーネントと Route のライフサイクル (詳細なチュートリアル)

SpringMVC を使用して vue のクロスドメインリクエストを解決します

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