ホームページ > 記事 > ウェブフロントエンド > 反応制御コンポーネントと非制御コンポーネントの詳細な説明

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

小云云オリジナル: 2018-02-11 09:46:301582ブラウズ

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

1. 値を独自の状態に保持する 0d8d8502ad9fc5bd029f7f31e30fdff5 コンポーネントは外部から変更できません。。

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

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

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

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

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

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

制御コンポーネント

たとえば、制御コンポーネントは値属性を追加するフォームコンポーネントであり、非制御コンポーネントは値属性が追加されていないコンポーネントです。制御コンポーネントのフォームは次のとおりです。 value 属性が追加されました。要素は、コンポーネントの値が特定の値に設定されると、常にその値になるため、コンポーネントの値の変更を制御する必要があります。

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

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

このようにして、InputItem コンポーネントは次のように外部から呼び出すことができます:

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

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

非制御コンポーネント

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

 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 コンポーネントにはステートレスコンポーネントを使用することが推奨されていますが、このフォームを使用して React コンポーネントを実装する場合は、制御されていないコンポーネントを使用してください。制御された要素を制御する必要がある場合は、次のような問題が発生します。

`制御コンポーネント` は内部状態を積極的に維持する必要がありますが、`ステートレスコンポーネント` は内部状態を維持する必要がありません。コンポーネントの状態、この 2 つの間に矛盾があります。

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

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

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

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

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

関連記事