面试官：什么是受控组件和非受控组件？各自有什么应用场景？

受控组件和非受控组件

在 React 中，受控组件（Controlled Components）和非受控组件（Uncontrolled Components）是两种不同的表单组件的处理方式。

1. 受控组件（Controlled Components）：

   • 受控组件是由 React 组件状态（state）来控制的表单元素。也就是说，表单元素的值（例如输入框的值、选择框的选中项等）是通过 React 组件的状态来管理和更新的。
   • 当用户与表单元素进行交互时，React 组件的状态会更新，并且表单元素的值也会相应地更新。通常，受控组件会使用 onChange 事件来监听用户输入的变化，并将变化后的值保存到组件状态中。
   • 通过控制输入值的变化，React 组件可以精确地控制表单的行为，例如验证输入、格式化数据等。

   • 示例代码：

     class ControlledComponent extends React.Component {
       constructor(props) {
         super(props);
         this.state = { value: '' };
       }
     
       handleChange = (event) => {
         this.setState({ value: event.target.value });
       };
     
       render() {
         return (
           <input
             type="text"
             value={this.state.value}
             onChange={this.handleChange}
           />
         );
       }
     }

2. 非受控组件（Uncontrolled Components）：

   • 非受控组件是由 DOM 元素自身来管理状态的表单元素。也就是说，表单元素的值不受 React 组件状态的控制，而是由 DOM 元素自身的状态来管理。
   • 当用户与表单元素进行交互时，DOM 元素会自动更新自身的状态，并且不会触发 React 组件的重新渲染。
   • 非受控组件通常使用 ref 来获取表单元素的引用，以便在需要时访问元素的值。

   • 示例代码：

     class UncontrolledComponent extends React.Component {
       constructor(props) {
         super(props);
         this.inputRef = React.createRef();
       }
     
       handleSubmit = (event) => {
         event.preventDefault();
         console.log('Input value:', this.inputRef.current.value);
       };
     
       render() {
         return (
           <form onSubmit={this.handleSubmit}>
             <input type="text" ref={this.inputRef} />
             <button type="submit">Submit</button>
           </form>
         );
       }
     }

使用场景

1. 受控组件的应用场景：

   • 表单验证和处理：受控组件适用于需要对用户输入进行验证和处理的场景。通过控制输入值的变化，可以精确地控制表单的行为，例如验证输入、格式化数据等。
   • 动态表单更新：受控组件可以灵活地响应组件状态的变化，并实时更新表单的值和状态。这对于需要根据其他输入动态更新表单的场景非常有用。
   • 表单重置：由于表单的值完全由组件状态控制，因此可以轻松地重置表单的值为初始状态，而无需手动操作 DOM 元素。

2. 非受控组件的应用场景：

   • 简单表单处理：非受控组件适用于简单的表单场景，例如仅需要收集用户输入而无需对输入进行验证或处理的情况。
   • 第三方库集成：某些第三方库或原生 API 可能需要直接操作 DOM 元素，此时使用非受控组件可以更方便地与这些库进行集成。例如，一些图表库或地图库可能需要直接操作某个 DOM 元素来显示图表或地图，这时可以使用非受控组件来获取相应的 DOM 元素并传递给库。
   • 性能优化：由于非受控组件不会触发 React 组件的重新渲染，因此在性能要求较高的场景下，非受控组件可能更适合。
   • 表单重置：在某些情况下，可能需要在用户点击重置按钮时将表单的值重置为初始状态，此时可以使用非受控组件。由于非受控组件的值是由 DOM 元素自身管理的，因此可以通过操作 DOM 元素来实现表单的重置功能，而无需手动操作组件状态。

总的来说，受控组件提供了更加灵活和可控的方式来处理表单，适用于需要对用户输入进行验证、处理和动态更新的场景。而非受控组件则更加简洁和直观，适用于简单的表单场景或需要与第三方库进行集成的情况。根据具体的需求和场景选择合适的组件类型可以更好地满足项目的需求。