react受控组件和非受控组件的区别

在 React 中，组件可以分为受控组件和非受控组件，它们之间的主要区别在于组件内部对数据的控制方式。

1. 受控组件：

   • 受控组件的值受 React 组件的状态（state）控制。
   • 组件的值由 React 组件的 state 属性管理，并通过 props 将其传递给组件。
   • 当用户与组件交互时，例如输入表单元素的值发生变化，React 会更新组件的状态，并将新的值传递给组件。
   • 示例：一个 <input> 元素的值由 React state 控制，通过 onChange 事件来更新状态。

   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. 非受控组件：

   • 非受控组件的值不受 React 组件状态的控制，而是由 DOM 元素自身来控制。
   • 组件的值由 DOM 元素直接管理，React 只负责对其进行引用。
   • 当用户与组件交互时，React 不会介入值的变化，而是直接由 DOM 元素自身来管理。
   • 示例：使用 ref 属性直接引用 <input> 元素，从而获取其值。

   class UncontrolledComponent extends React.Component {
     constructor(props) {
       super(props);
       this.inputRef = React.createRef();
     }
   
     handleClick = () => {
       console.log('Input value:', this.inputRef.current.value);
     }
   
     render() {
       return (
         <div>
           <input type="text" ref={this.inputRef} />
           <button onClick={this.handleClick}>Get Value</button>
         </div>
       );
     }
   }
   

总的来说，受控组件适用于需要 React 控制状态的情况，而非受控组件适用于需要直接操作 DOM 的情况。选择何种方式取决于具体的需求和项目的架构。