什么是React受控组件和非受控组件？

Question

ReactJS中什么是受控组件和非受控组件？它们彼此之间有何不同？

Answer 1

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

• A Controlled Component是通过props获取其当前值，并通过诸如onChange之类的回调通知更改的值。父组件通过处理回调并管理自己的状态并将新值作为道具传递给受控组件来“控制”它。您也可以将其称为“哑组件”。
• A Uncontrolled Component是内部存储其自身状态的对象，您可以使用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>

在大多数（或所有）情况下you should use controlled components。

Answer 2

• 受控组件使用回调通知其他组件有关更改的信息。例如：<Button onClick={() => console.log("clicked")}>Click</Button>。
• 不受控制的组件不会将其他组件的更改通知其他组件，您只能使用ref-s访问组件。如果您需要访问HTML元素的实际dom，则引用可能很有用]