React制御コンポーネントと非制御コンポーネントとは何ですか？

ReactJSの制御コンポーネントと非制御コンポーネントとは何ですか？それらはどのように互いに異なりますか？

これはステートフルDOMコンポーネント（フォーム要素）に関連し、Reactドキュメントは違いを説明します：

• 制御されたコンポーネントはを通じて現在の値をとるものですpropsようにコールバックして変更と通知onChange。親コンポーネントは、コールバックを処理して自身の状態を管理し、新しい値をプロップとして制御されたコンポーネントに渡すことによって、それを「制御」します。これを「ダムコンポーネント」と呼ぶこともできます。
• A 制御されていないコンポーネントは、内部で自身の状態を保存するものであり、あなたが使用してDOMを照会refあなたがそれを必要とするとき、現在の値を見つけること。これは、従来のHTMLに少し似ています。

ほとんどのネイティブReactフォームコンポーネントは、制御された使用と制御されていない使用の両方をサポートします。

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

ほとんど（またはすべて）の場合、制御されたコンポーネントを使用する必要があります。

• 制御されたコンポーネントは、コールバックを使用して他のコンポーネントに変更について通知します。次に例を示します<Button onClick={() => console.log("clicked")}>Click</Button>。
• 制御されていないコンポーネントは、変更について他のコンポーネントに通知せず、ref-sを使用してのみコンポーネントにアクセスできます。HTML要素の実際のdomにアクセスする必要がある場合は、Refが役立つことがあります。