制御されていないコンポーネントと制御されていないコンポーネントReactJs

Question

ほとんどすべてのReactJSチュートリアルや入力の変更を処理するためのthe official documentationでも、onChangeが推奨されています。値に対して状態を使用し、onChangeで値を変更します。これにより、すべてのキーストロークでレンダリングがトリガされます。したがって、

1. レンダリングは本当に安いですか？
2. 入力値がDOMに保持されていませんか？したがって、DOMとVirtualDOMの間に違いはありません。したがって、レンダリングは何も起こりませんが、 （おそらく誤った仮定）。いないすべてのキーストロークで、その値に関連するコンポーネントを通過したため、
   1. は値を保持するためにカスタム関数や変数を使用し、最後の入力した後の状態を設定します。

   ただ楽しさと学習の目的のために、私はそれらを試してみました

3. onChangeの代わりにonBlurを使用します。

しかし、私はどちらかが好きではなく、この質問をしたいと思います。ライブ入力値の変更が重要でない場合は、最後の入力のみを処理しますが、まだ変更していますか？

Answer 1

Reactは再レンダリングを非常に効率的に処理します。変更のみがレンダリングされます。制御された入力

制御入力で、あなたは状態変数一部では、一般的に（あるいは小道具と入力の値を指定します。入力を設定するには、2つの方法

まずあり

症例）。この場合、状態（または小道具）を設定するにはonChange関数を呼び出す必要があります。値は状態/小数点に設定されているため、値を変更する必要があります。

例

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

制御入力を持つことの利点は、あなたがコンポーネントに反応全体で使用可能な値を持っていることであり、あなたが入力に解雇されるイベントを必要とするか、または値を取得するためにDOMにアクセスしていません。

第二：あなたが入力のためにカスタム値を指定しないように、入力を取得するためのonChangeハンドラを必要としない。この場合には制御されていない入力

。

<input type="text" onBlur={(e) => {console.log(e.target.value)}/> 

入力値を取得する他の方法、私たちのように、引用文献を使用しないDOMにアクセスすることにより、次のようになります。入力の値は、EXは

DOMにアクセスするか、イベントオブジェクトからフェッチすることができますあなたはREACご質問については

In React .js: is there any function similar like document.getElementById() in javascript ? how to select certain object?

：this.inputVal.value

REFを使用する方法についてこの回答を参照してください。 t virtualDOM

仮想DOMは、DOMの効率的な再レンダリングに使用されます。これは実際にあなたのデータを汚くチェックすることとは関係ありません。ダーティチェックの有無にかかわらず、仮想DOMを使用して再レンダリングすることができます。 2つの仮想ツリー間で差分を計算する際にはオーバーヘッドがありますが、仮想DOMの違いは、データが変更されたかどうかではなく、DOMで更新が必要なものを理解することです。

仮想ツリーは、状態が変更されたときにのみ再レンダリングされます。したがって、オブザーバブルを使用して状態が変化したかどうかを確認することは、不必要な再レンダリングを避けるための効率的な方法であり、不要なツリーの差分が多数発生します。私にとって

Answer 2

、リアルタイムの検証とは別に、制御コンポーネントを使用する主な理由は、の原則である「真実のシングルソース。」制御されない成分の場合

、入力の値は、フォーム入力して、反応させコンポーネントで使用されるものの間で異なっていてもよいです。新しい値onBlurを取得することができますが、DOMの値がこのイベントを発生させずに変更できる方法があります。その場合、ユーザーが見ている値と作業している値が異なる可能性があります。ユーザーが期待するものから

これは大きな懸念事項ではないかもしれませんが、Reactはこの原則を（他の州から派生することができる状態に値を保持しない）多くのことを説いているので、一貫性のためにやります。

以外にも、あなたは各入力に再レンダリングのコストを心配する必要はありません。