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

101

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

reactjs react-component

— 鑫
source

提名重新开放。这实际上是一个相当精确的问题。不确定如何将其视为过于广泛。

— Charlie Flowers

127

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

甲控制的部件是一个，通过取其电流值props和通过像回调通知变化onChange。父组件通过处理回调并管理自己的状态并将新值作为道具传递给受控组件来“控制”它。您也可以将其称为“哑组件”。
一个不受控制的组件是一个存储其自己的内部状态，并且您使用查询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>

在大多数（或所有）情况下，应使用受控组件。

— 亚伦比尔
source

价值是不是通过state而不是通过props？

— 伊万卡·托多罗娃

@IvankaTodorova对于受控组件，值通过传递props。不受控制的组件将用于state内部控制值本身。这是关键的区别。

— 亚伦·比尔

它们之间的区别在于，设置/传递其值并具有回调的组件称为controlled components（<input type="text" value="value" onChange={handleChangeCallbackFn} />），而传统的HTML中，输入元素处理自己的值并可以通过refs调用uncontrolled components（<value type="text" />）进行读取。受控组件通过setState作为道具的父组件或从其父组件获取状态来管理自己的状态。

— Lior Elrom '19

您将如何调用一个defaultValue通过props 获取但通知控制器的组件onBlur？

— Paul Razvan Berg，

@PaulRazvanBerg听起来像是反模式，状态应该在一个地方控制。通常，您会将状态提升到最接近的共同祖先。

— 亚伦比尔

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

— 闪耀
source