什么是受控组件和非受控组件？

---

在 React 中，受控组件和非受控组件是两种处理表单元素的方式，它们涉及到 React 组件如何处理和维护表单元素的状态。

1. 受控组件（Controlled Components）：

• 定义： 在 React 中，如果一个表单元素的值（如 <input>、<textarea>、<select>）被 React 的状态（state）控制，那么该表单元素就是一个受控组件。
• 特点： 受控组件的值和状态是由 React 组件的状态管理的，通过事件处理函数来更新状态，从而更新表单元素的值。
• 优点： 可以在 React 组件中实现对表单数据的完全控制，方便进行验证、处理和状态同步。

示例：

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  handleChange = (event) => {
    this.setState({ inputValue: event.target.value });
  };

  render() {
    return (
      <input
        type="text"
        value={this.state.inputValue}
        onChange={this.handleChange}
      />
    );
  }
}

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

• 定义： 如果一个表单元素的值不受 React 组件状态的控制，而是由 DOM 元素本身管理，那么该表单元素就是一个非受控组件。
• 特点： 非受控组件的值由 DOM 元素自身管理，React 不干预其值的变化，通常通过 Ref 来获取和处理表单数据。
• 优点： 简化了 React 组件的状态管理，适用于一些简单的场景。

示例：

class UncontrolledComponent extends React.Component {
  inputRef = React.createRef();

  handleSubmit = (event) => {
    event.preventDefault();
    alert(`Input Value: ${this.inputRef.current.value}`);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

选择使用受控组件还是非受控组件取决于具体的场景和需求。通常，受控组件更适合需要 React 状态管理和处理的复杂场景，而非受控组件则更简单，适用于一些简单的表单。

---

原文链接：codingdict.net

---