UncontrolledとControlledの違いがわからない

Question

前提・実現したいこと

React.jsの学習をしています
そのさい、inputの値の制御で、コンポーネントがUncontrolledとControlledという状態?をもつことを知りました

発生している問題・エラーメッセージ

Uncontrolled

• 常にユーザーの入力を反映する（デフォルト値はvalue属性ではなくdefaultValue属性を使う?）（この方法で入力された値はstateに反映されない?）
• onChangeでsetStateをしてもinputの値を変更できる

Controlled

• onChangeでsetStateをすることでのみinputの値を変更できる

※文末に「?」をつけているところはあまり自信がありません。もしかしたらこういったところを理解すれば両者の違いもわかってくるのでしょうか･･･

---

という認識です

じゃあ全部Uncontrolledなコンポーネントにしてしまえばいいのでは？
なぜControlledがあるのか？そもそも、なぜinputの値をvalue属性ではなくstateを使って管理したいのか？
と、考えるほど両者の特性、違いがわからなくなってしまいました

試したこと

下の2つのサイトを参考にしたんですが、それぞれ何が違って、何がいいのかがわかりませんでした
React.jsの公式サイトも読んでみましたが、英語ができずReact.js自体の理解がまだ浅いため、Google翻訳を通した文章では理解ができませんでした
https://qiita.com/koba04/items/40cc217ab925ef651113
http://js.studio-kingdom.com/react/guides/forms

よろしくお願いします

Answer 1

そもそも、なぜinputの値をvalue属性ではなくstateを使って管理したいのか？

React全体に、Single Source of Truth（データの原本は1箇所に固める）という考え方が流れています。あちこちにデータが保存されると「どれを信用していい」のかわからなくなって、同期も煩雑になる…という考え方です。

ということで、Controlledのコンポーネントは、「データ管理を別な箇所に任せる」ということになっていて、それ自体では保存機能も持たない形となっています。すべてをReactでの管理にすることで、「データが変化したときに別な値も連動して変化させる」というようなシチュエーションでも、すべてのデータをJavaScriptの世界で一元的に制御できて、フォーム上のデータとJavaScriptから見えるデータがずれるなどの中途半端な状態が発生しないというメリットがあります。

とはいえ、外部から使わない値までControlledで管理させられると面倒なので、Reactで値を管理する必要のない場面ではUncontrolledにもできるようになっています。

Comments

[ptodsma]

>Single Source of Truth（データの原本は1箇所に固める）
ううむ、むつかしいですね。よくわかりませんでした。
value属性という属性で取得できるようになっていることと、
stateという仕組みでinputの値を取得できるようにすること、
この2つの違いはありますか？

もともとvalue属性という1つの手段で取得、変更できた値を、
わざわざ別の仕組みを作りそれを使って管理する意味がわかりません。

そういう意味で、stateの仕組みはとてもまわりくどく感じます
「Controlledのコンポーネントとはそういうものだ」というのは、そうなのかもしれませんが･･･

>フォーム上のデータとJavaScriptから見えるデータがずれる
DOMの要素にかかれている属性を直接取得、変更するときはこういったずれも発生しないと思います。なので、やはりstateという新しい仕組みを使うことの理由がわかりません。

[maisumakun]

わからないなら、無理に使う必要もないかもしれません。

ただ、データが1個だけならstateで管理してもDOMの値そのものを使う形でも問題ないのですが、複数のinput要素にまたがる値を一体のものとしてハンドリングしたい場合、stateなら「全部まとめて1つのオブジェクト」のような形で管理できるのに対して、直接値を見る場合はそんな芸当は不可能です。

[maisumakun]

あと、「コンポーネントの中に別のコンポーネントを書く」というような場合も、Controlledであれば内側のコンポーネントの状態を外側のコンポーネントの値で制御できるので、全部まとめて制御するのが容易になります。