Reactjs 什么是反应控制组件和非控制组件？

ReactJS中的受控组件和非受控组件是什么？它们之间有什么区别？

这与有状态DOM组件（表单元素）有关，React文档解释了区别：

• 通过

  props

  获取其当前值，并通过回调通知更改，如

  onChange

  。父组件通过处理回调和管理自己的状态并将新值作为道具传递给受控组件来“控制”它。您也可以将其称为“哑组件”
• 是一种在内部存储自己状态的方法，当需要时，可以使用

  ref

  查询DOM以查找其当前值。这有点像传统的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>

//受控：
//不受控制：
//使用'inputRef.current.value'读取的当前值

在大多数（或所有）情况下。

• 受控组件使用回调将更改通知其他组件。例如：

  console.log（“clicked”）}>单击

• 非受控组件不会将其更改通知其他组件，您只能使用ref-s访问组件。如果需要访问HTML元素的真实dom，Ref可能很有用

---

受控组件是从回调函数获取更改值的组件 和 非受控组件是具有来自DOM的组件。 例如 当输入值改变时，我们可以在受控组件和

---

此外，我们还可以使用类似于ref的DOM获取值。

受控组件主要是那些组件的任何属性值都来自父组件或存储的组件（如redux）

例如

然而，对于非受控部件，部件值可根据事件处理从部件状态中获取

---

例如，

不是通过

状态

获取的值，而是通过

道具

？@IvankaTodorova对于受控组件，值是通过

道具

传入的。非受控组件将使用

状态

在内部控制值本身。这是关键区别。它们之间的区别在于，设置/传递其值并具有回调的组件称为

受控组件（
），而传统HTML中的输入元素处理其自身的值，并且可以通过
refs
被称为
非受控组件
（
）。受控组件通过
setState
管理自己的状态，或者从其父组件获取作为道具的状态。如何调用通过道具获取其
defaultValue
的组件，但它会通知控制器
onBlur
？@PaulRazvanBerg，这听起来像是一种反模式。通常，您会向clo报告sest共同祖先。提名重新开放。这实际上是一个相当精确的问题。不确定如何将其视为过于宽泛。在添加示例时，没有类似于
通知其他组件的概念