非受控组件与受控组件的理解与实践
2023-09-20 18:07:12
非受控组件与受控组件：深入探索 React 中的数据处理方法
在 React 的世界中，组件扮演着举足轻重的角色，它们是构建用户界面的基本单元。其中，非受控组件和受控组件是两种常见的组件类型，它们在数据处理方式上存在着本质的区别。
非受控组件：简单而直接
非受控组件不通过组件状态管理输入值，而是直接从 DOM 中获取值。这种组件通常用于处理简单的表单元素，如 <input>、<select> 等。非受控组件的主要特点是，组件本身并不存储输入值，而是由表单元素本身负责保存和维护其值。当用户输入数据时，组件通过 ref 属性或事件处理函数来获取表单元素的值，并将其传递给父组件或用于更新其他组件的状态。
受控组件：易于维护和管理
受控组件通过组件状态来管理输入值，表单元素的值由组件状态决定。这种组件通常用于处理复杂表单元素，如带有验证或自动完成功能的输入框等。受控组件的主要特点是，组件本身存储并维护输入值，表单元素的值由组件状态决定。当用户输入数据时，组件状态会随之更新，从而触发组件的重新渲染。
非受控组件与受控组件的异同
相同点：
- 非受控组件和受控组件都是 React 中的组件类型。
- 它们都可以用于构建表单逻辑。
- 它们都可以通过
ref属性或事件处理函数来获取表单元素的值。
不同点：
- 非受控组件不通过组件状态管理输入值，而是直接从 DOM 中获取值。
- 受控组件通过组件状态管理输入值，表单元素的值由组件状态决定。
- 非受控组件在获取表单元素的值时需要通过
ref属性或事件处理函数来获取。 - 受控组件在获取表单元素的值时只需要通过组件状态即可获取。
- 非受控组件的优点是简单易用，适合处理简单的表单元素。
- 受控组件的优点是易于维护和管理表单状态，适合处理复杂表单元素。
使用 Refs 和事件处理构建表单逻辑
非受控组件
对于非受控组件，可以使用 ref 属性或事件处理函数来获取表单元素的值。ref 属性可以获取 DOM 元素的引用，而事件处理函数则可以在用户输入数据时触发。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
handleSubmit = (event) => {
event.preventDefault();
const value = this.inputRef.current.value;
// ...
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={this.inputRef} />
<button type="submit">提交</button>
</form>
);
}
}
受控组件
对于受控组件，可以使用组件状态来管理输入值。当用户输入数据时，组件状态会随之更新，从而触发组件的重新渲染。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ''
};
}
handleChange = (event) => {
this.setState({ value: event.target.value });
}
handleSubmit = (event) => {
event.preventDefault();
const value = this.state.value;
// ...
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<button type="submit">提交</button>
</form>
);
}
}
总结
非受控组件和受控组件都是 React 中常用的组件类型，它们在数据处理方式上存在着本质的区别。非受控组件不通过组件状态管理输入值，而是直接从 DOM 中获取值，而受控组件则通过组件状态管理输入值。在实际开发中，根据具体的业务需求和场景选择合适的组件类型非常重要。
常见问题解答
-
非受控组件和受控组件哪个更好？
答：没有哪一种组件类型更好，它们各有优缺点。非受控组件简单易用，适合处理简单的表单元素，而受控组件易于维护和管理表单状态，适合处理复杂表单元素。 -
如何选择合适的组件类型？
答：在选择合适的组件类型时，需要考虑表单元素的复杂性、数据处理的需求和维护的难易程度等因素。 -
什么时候使用 Refs？
答：当需要直接访问 DOM 元素时，可以使用 Refs。例如，在非受控组件中获取表单元素的值或在受控组件中实现自定义表单验证时。 -
什么时候使用事件处理函数？
答：当需要在用户与表单元素交互时执行特定操作时，可以使用事件处理函数。例如，在非受控组件中获取表单元素的值或在受控组件中处理输入验证。 -
如何管理复杂表单的状态？
答：对于复杂表单，可以使用表单状态管理库，如 Redux Form 或 Formik，来管理表单状态。这些库可以简化表单状态管理，并提供额外的功能，如表单验证和错误处理。
