React模式解析：深入理解受控与非受控输入组件-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00941/article/details/148392016

React模式解析：深入理解受控与非受控输入组件

react-in-patterns A free book that talks about design patterns/techniques used while developing with React. 项目地址: https://gitcode.com/gh_mirrors/re/react-in-patterns

在React开发中，表单处理是一个常见且重要的场景。理解受控组件(Controlled Components)和非受控组件(Uncontrolled Components)的区别对于构建高效、可维护的React应用至关重要。本文将深入探讨这两种模式的实现原理、使用场景以及最佳实践。

什么是受控组件？

受控组件是指表单元素的值完全由React状态控制的组件。这种组件的特点是：

表单数据由React组件状态管理
通过props将状态值传递给表单元素
通过事件处理器同步用户输入到状态

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
  }

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

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

受控组件的特点

单向数据流：数据从React状态流向DOM，再通过事件处理器流回状态
即时验证：可以在用户输入时实时验证和处理数据
完全控制：对表单元素的行为和值有完全的控制权

什么是非受控组件？

非受控组件是指表单元素的值由DOM自身管理的组件，React不直接控制其值。这种组件的特点是：

使用defaultValue或defaultChecked设置初始值
通过ref获取当前DOM值
表单数据由DOM节点自身维护

class UncontrolledInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    alert('输入的值是: ' + this.inputRef.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          defaultValue="初始值"
          ref={this.inputRef}
        />
        <button type="submit">提交</button>
      </form>
    );
  }
}

非受控组件的特点

更接近传统HTML表单：行为类似于常规HTML表单元素
性能优势：避免了频繁的状态更新和重新渲染
集成第三方库：更容易与不基于React的库集成

核心区别对比

| 特性 | 受控组件 | 非受控组件 | |------|---------|-----------| | 数据管理 | React状态管理 | DOM自身管理 | | 值设置 | value属性 | defaultValue属性 | | 值获取 | 从状态获取 | 通过ref获取DOM值 | | 变更处理 | onChange事件处理器 | 通过ref监听或表单提交时获取 | | 实时验证 | 容易实现 | 较难实现 | | 性能 | 每次输入都触发渲染 | 性能更优 |