在React中，“受控组件”与“非受控组件”是用于处理表单输入和其他用户交互的两种主要组件类型，它们具有不同的使用方式和特点。以下是对这两种组件的详细解释和使用场景的归纳：
- 受控组件（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>);
};
- 非受控组件（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>);}
};
综上所述，受控组件和非受控组件各有其优缺点和使用场景。在选择使用哪种组件时，需要根据具体的应用需求和业务场景来决定。
