解释React中的“受控组件”与“⾮受控组件”的概念及使⽤场景

1. 受控组件（Controlled Components）

• 概念：受控组件是由React组件完全控制的表单元素。组件的状态（state）被⽤于存储和更新表单 元素的值，同时更新状态的函数也负责更新表单元素的值。

• 特点：

◦ 组件的状态反映了表单元素的值。

◦ ⽤⼾输⼊会通过事件处理器（如onChange）更新组件的状态。

◦ 表单提交时，组件的状态会被⽤于进⼀步处理（如提交到服务器）。

• 使⽤场景：⼤部分使⽤场景都推荐使⽤受控组件来实现表单，因为它提供了更⼤的灵活性和控制 ⼒。例如，即时表单验证、根据⽤⼾输⼊动态改变UI等场景都⾮常适合使⽤受控组件。

• ⽰例：

import React, { useState } from 'react';
const ControlledComponent = () => {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted value:', value);
// 进⾏进⼀步的处理
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={value} onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
};

2. ⾮受控组件（Uncontrolled Components）

• 概念：⾮受控组件是由DOM⾃⾝管理和处理的表单元素。React组件不追踪或管理表单元素的状 态，⽽是通过引⽤（ref）来访问表单元素的值和状态。

• 特点：

◦ 组件不直接控制表单元素的值。

◦ 通过引⽤（ref）来访问和修改表单元素的值。

◦

更接近于传统的HTML表单处理⽅式。

• 使⽤场景：当需要操作其他组件的值或当受控组件的控制⼒过强导致某些简单场景难以实现时，可 以考虑使⽤⾮受控组件。但请注意，⾮受控组件的控制⼒相对较弱，可能不适⽤于需要即时验证或 动态改变UI的复杂场景。

• ⽰例：

import React, { createRef } from 'react';
class UncontrolledComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = createRef();
}
handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted value:', this.inputRef.current.value);
// 进⾏进⼀步的处理
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" ref={this.inputRef} />
<button type="submit">Submit</button>
</form>
);
}
};

综上所述，受控组件和⾮受控组件各有其优缺点和使⽤场景。在选择使⽤哪种组件时，需要根据具体的应⽤需求和业务场景来决定。

程序员玫玫：堪称2024最强的前端面试场景题，已帮助512人成功拿到offer

给你们推荐一份以帮助500+人成功拿到offer的前端场景题。