这与有状态DOM组件(表单元素)有关,React文档解释了这一区别:
props
获取其当前值并通过回调(如onChange
)通知更改的值.父组件通过处理回调、管理自己的状态并将新值作为props 传递给受控组件来"控制"它.你也可以称之为"哑组件". 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.