react 受控组件与非受控组件
概述
React 中的受控组件和非受控组件都是针对于表单数据而言的。React 推荐使用受控组件来处理表单数据。
在受控组件中，表单数据由 React 组件的 state 管理。在非受控组件中，表单数据交由 DOM 节点处理，可以使用 ref 来从 DOM 中获取表单数据。
受控组件
React 的 state 是表单的数据源，并且渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。
function Form() {
const [name, setName] = useState('');
const onInputChange = event => setName(event.target.value);
const onFormSubmit = event => {
console.log('提交的数据 => ', name);
event.preventDefault();
};
return (
<form onSubmit={onFormSubmit}>
<label>
名字：
<input type='text' value={name} onChange={onInputChange} />
</label>
<input type='submit' value='提交'/>
</form>
)
}
非受控组件
表单元素自己维护 state。可以使用 ref 获取表单数据.
function Form() {
const inputElement = useRef(null);
const onFormSubmit = event => {
console.log('提交的数据 => ', inputElement.current.value);
event.preventDefault();
};
return (
<form onSubmit={onFormSubmit}>
<label>
名字：
<input type='text' ref={inputElement} />
</label>
<input type='submit' value='提交'/>
</form>
)
}
value和defaultValue
在react表单里面存在两种组件形式，一种叫controlled component, 一种叫uncontrolled component。controlled的意思是说，你只能通过code去改变组件的状态，比如checkbox，如果是controlled，那么你只能通过code去改变它的选中状态，而不能靠用户点击来修改。而uncontrolled的组件反过来，只能通过用户操作来改变状态，而不能通过code来改变。很可惜，一个react组件，不能在这两个形态之间转换，所以这对你写的code会有影响。
怎么区分呢？很简单，看你的代码是使用defaultValue/defaultChecked还是直接使用value/checked。如果是使用value/checked，那么是controlled，反之则是unconrolled。
另外还有两个属性，disabled和readOnly，这两个属性其实要配合这两种形态来使用。controlled component只和readOnly配合，uncontrolled component只和disabled。如果一个input设置了value属性，但是没有给onChange或readOnly，控制台会有错误提示。这是因为，一个controlled组件，它的创建一定要用于控制，而非为了初始化一个值。这种情况下如果你想在外部去控制它，而不是它的onchange事件中，那么应该添加readOnly，这样就不会报错了。当然，这里的配合只是我的个人感悟，并非官方强制。
默认值
在 React 渲染生命周期时，表单元素上的 value 将会覆盖 DOM 节点中的值，在非受控组件中，React 可以通过 defaultValue 属性赋予组件一个初始值。
return (
<form onSubmit={onFormSubmit}>
<label>
名字：
<input type='text' defaultValue='test' ref={inputElement} />
</label>
<input type='submit' value='提交'/>
</form>
)
具有默认值（defaultValue）的表单元素，此时是否应该去控制后续的更新？
特殊的表单元素
textarea
在 React 中，textarea 使用 value 属性代替 HTML 中的子元素定义其文本。
<textarea value={value} onChange={handleChange} />
select
React 使用根 select 标签上的 value 属性定义选中，而不使用 selected 属性。
<select value={value} onChange={handleChange}>
<option value="grapefruit">葡萄柚</option>
<option value="lime">酸橙</option>
<option value="coconut">椰子</option>
<option value="mango">芒果</option>
</select>
<input type='file'
React 中 input type='file'> 始终是一个非受控组件，因为它的值只能由用户设定，而不能通过代码控制。
受控组件与非受控组件的选择
| 功能 | 受控组件 | 非受控组件 |
|---|---|---|
| 一次性的取值（例如：提交时 | ✅ | ✅ |
| 提交时验证 | ✅ | ✅ |
| 实时验证 | ✅ | ❌ |
| 有条件的禁用提交按钮 | ✅ | ❌ |
| 强制输入格式 | ✅ | ❌ |
| 一个数据的多个输入 | ✅ | ❌ |
| 动态输入 | ✅ | ❌ |
实际应用场景
场景1
页面有一些信息和一个编辑按钮，点击按钮出来一个弹窗，弹窗的内容是对信息的更改。
// 我们使用 Redux 来进行状态管理，数据来源为 props
const Information = props => {
const [name, setName] = useState('');
const [age, setAge] = useState(18);
const nameInputElement = useRef(null);
const ageInputElement = useRef(null);
useEffect(() => {
setName(props.name);
setAge(props.age);
}, [props]);
return (
<div>
<div>
<div>姓名：{name}</div>
<div>年龄：{age}</div>
</div>
<Modal>
<div>
<label>
姓名：
{/* 方式1: 受控组件 */}
<input type='text' value={name} onChange={e => setName(e.target.value)}/>
{/* 方式2: 非受控组件 */}
<input type='text' defaultValue={name} ref={nameInputElement}/>
{/* 方式3: 非受控组件 */}
<input type='text' defaultValue={name} onChange={e => setName(e.target.value)}/>
{/* 方式4: 非受控组件 */}
<input type='text' defaultValue={props.name} onChange={e => setName(e.target.value)}/>
</label>
</div>
<div>
<label>
年龄：
{/* 方式1: 受控组件 */}
<input type='text' value={age} onChange={e => setAge(Number(e.target.value))}/>
{/* 方式2: 非受控组件 */}
<input type='text' defaultValue={age} ref={nameInputElement} />
{/* 方式3: 非受控组件 */}
<input type='text' defaultValue={age} onChange={e => setAge(Number(e.target.value))}/>
{/* 方式4: 非受控组件 */}
<input type='text' defaultValue={props.age} onChange={e => setAge(Number(e.target.value))}/>
</label>
</div>
</Modal>
</div>
)
};
上面有4种方式：请注意：这四种方式都是在
- 方式1：在
中使用方式1的时候，弹窗出来之后对内容进行修改，之后点击取消关闭弹窗后，再点击编辑按钮，此时弹窗内容还是修改后的内容。所以如果使用方式1：受控组件来进行 时，需要在 closeModal 的方法中对内容进行重置。 - 方式2：这种方式使用 ref 获取表单的值，但是有一个问题就是，获取用户的 age 是异步的，当拿到用户的 age 后，页面重新 render，但是此方式不会进行 age 的更新，故不使用此方式。
- 方式3：这种方式使用 onChange 获取表单的值，但是这种方式和方式2有同样的问题，故不使用此方式。
- 方式4：这种方式弹窗出来之后对内容的进行修改，之后点击取消关闭弹窗，再点击编辑按钮，内容是原有的内容，并且关闭时不需要重置。
- 注：方式2与方式3的区别在于方式3会 render，而方式2不会 render
总结：方式1（受控组件）与方式4（非受控组件）都可以进行使用，方式1 closeModal 时需要重置修改内容。
场景2
页面中有一个单选框（使用 ant Design 的
const Page = props => {
const [sex, setSex] = setState('');
const sexElement = useRef(null);
useEffect(() => {
setSex(props.sex);
}, [props]);
const save = () => {
console.log('你的性别 -> ', sex);
};
return (
<div>
性别：
{/* 方式1: 受控组件 */}
<Radio.Group value={sex} onChange={e => setSex(e.target.value)}>
<Radio.Button value='male'>男</Radio.Button>
<Radio.Button value='female'>女</Radio.Button>
</Radio.Group>
{/* 方式2: 非受控组件 */}
<Radio.Group defaultValue={sex} ref={sexElement}>
<Radio.Button value='male'>男</Radio.Button>
<Radio.Button value='female'>女</Radio.Button>
</Radio.Group>
{/* 方式3: 非受控组件 */}
<Radio.Group defaultValue={sex} onChange={e => setSex(e.target.value)}>
<Radio.Button value='male'>男</Radio.Button>
<Radio.Button value='female'>女</Radio.Button>
</Radio.Group>
{/* 方式4: 非受控组件 */}
<Radio.Group defaultValue={props.sex} onChange={e => setSex(e.target.value)}>
<Radio.Button value='male'>男</Radio.Button>
<Radio.Button value='female'>女</Radio.Button>
</Radio.Group>
<button onClick={save}>保存</button>
</div>
)
};
上面有4种方式：请注意：这四种方式都是在页面中使用的
- 方式1：受控组件，没有任何问题
- 方式2：异步获取 sex 之后页面没有进行更改，故不使用此方式。
- 方式3：和方式2相同的问题，故不使用此方式。
- 方式4：实践下来之后和方式2具有相同的问题
- 总结：在页面中使用的时候乖乖用受控组件。
总结
我遇到了场景2中方式4的问题，所以我谷歌了一下，答案就是去研究受控组件，所有就诞生了这篇文章。另外千万不要在受控组件中使用 debounce，因为受控组件的一个特点就是实时。在非受控组件中，个人感觉 debounce 还是有必要使用一下的，从而优化了一下 render 的次数。
两者区别
1、受控组件
- 受控组件依赖于状态
- 受控组件的修改会实时映射到状态值上，此时可以对输入的内容进行校验
- 受控组件只有继承React.Component才会有状态
- 受控组件必须要在表单上使用onChange事件来绑定对应的事件
2、非受控组件
- 非受控组件不受状态的控制
- 非受控组件获取数据就是相当于操作DOM
- 非受控组件可以很容易和第三方组件结合，更容易同时集成 React 和非 React 代码
- 选择受控组件还是非受控组件
1、受控组件使用场景：一般用在需要动态设置其初始值的情况。例如：某些form表单信息编辑时，input表单元素需要初始显示服务器返回的某个值然后进行编辑。
2、非受控组件使用场景：一般用于无任何动态初始值信息的情况。例如：form表单创建信息时，input表单元素都没有初始值，需要用户输入的情况。
