当前位置：首页 > news >正文

React前端面试每日一试 5.什么是受控组件和非受控组件？

news 2025/9/6 20:07:01

在React中，受控组件和非受控组件是两种处理表单数据的方式。理解这两种方式对于管理和维护表单状态非常重要。

受控组件（Controlled Components）

受控组件是指那些表单数据完全由React组件的状态控制的组件。也就是说，表单元素的值是通过React的state来管理的，任何对表单元素值的更改都通过事件处理器来更新状态。

特点如下:

1.数据源：表单元素的值由React组件的状态控制。
2.单一数据源：表单元素的值和组件状态保持同步，确保数据源一致性。
3.事件处理：通过事件处理器（如onChange）来更新组件状态，从而更新表单元素的值。

示例代码

import React, { useState } from 'react';function ControlledForm() {const [inputValue, setInputValue] = useState('');function handleChange(event) {setInputValue(event.target.value);}function handleSubmit(event) {event.preventDefault();alert('Submitted value: ' + inputValue);}return (<form onSubmit={handleSubmit}><label>Input:<input type="text" value={inputValue} onChange={handleChange} /></label><button type="submit">Submit</button></form>);
}export default ControlledForm;

在上面示例中，输入框的值由组件的状态inputValue控制，handleChange函数更新状态，从而更新输入框的值。

非受控组件（Uncontrolled Components）

非受控组件是指那些表单数据由DOM本身管理的组件。即表单元素的值存储在DOM中，React并不直接控制这些值。通常，非受控组件使用ref来访问DOM元素并获取其值。

特点如下

1.数据源：表单元素的值由DOM本身控制。
2.访问方式：使用ref来访问表单元素的值。
3.独立管理：表单元素的值不与组件状态绑定，因此不需要事件处理器来更新组件状态。

示例代码

import React, { useRef } from 'react';function UncontrolledForm() {const inputRef = useRef(null);function handleSubmit(event) {event.preventDefault();alert('Submitted value: ' + inputRef.current.value);}return (<form onSubmit={handleSubmit}><label>Input:<input type="text" ref={inputRef} /></label><button type="submit">Submit</button></form>);
}export default UncontrolledForm;

在上面这个示例中，输入框的值由DOM本身控制，通过inputRef访问输入框的值并在表单提交时读取。

总结

受控组件和非受控组件是两种处理React表单数据的不同方式。受控组件使用React状态来管理表单数据，提供更高的控制性和一致性，但代码相对复杂。非受控组件则依赖于DOM本身来管理表单数据，代码简单，但数据流可能不如受控组件明确。选择哪种方式取决于具体的使用场景和需求。

通过合理选择和使用受控组件和非受控组件，可以构建高效、可维护的React表单组件，满足各种复杂的表单处理需求。

拓展双控组件

有时候我们可能希望组件能够兼具受控和非受控的特性，这种组件可以称为“双控组件”（Hybrid Components）。双控组件允许开发者在需要时以受控方式使用组件，而在其他情况下则以非受控方式使用组件。

双控组件的实现可以通过以下方式：
1.受控模式：如果组件接收到value和onChange props，则以受控方式运行。
2.非受控模式：如果组件没有接收到value和onChange props，则以非受控方式运行，并使用defaultValue初始化组件的值。

通过这种方式，组件可以更好地适应不同的使用场景，同时保持代码简洁和可维护性.