React中的受控组件与非受控组件：理解与实战

引言

在React开发中，组件的状态管理是一项核心技能。受控组件（Controlled Component）与非受控组件（Uncontrolled Component）是React中处理表单数据的两种主要方式。本文旨在深入探讨这两种组件的概念、区别及应用场景，并通过一系列示例代码，帮助你更好地理解并掌握这一关键知识点。

基础概念

受控组件

在React中，如果一个组件的值是由其父组件的state控制的，并且该组件的值只能通过事件处理器来改变，那么这个组件就被称为受控组件。通常情况下，表单元素如<input>, <textarea>, <select>等都是受控的，因为它们的值被React组件的state所“控制”。

作用说明

受控组件的主要优势在于数据一致性。由于组件的状态始终由React的state管理，因此可以确保用户界面和数据状态的同步，从而避免潜在的bug。

非受控组件

相反，非受控组件是指那些不需要由React的state直接管理其值的组件。这类组件通常有一个默认的值或者初始状态，并且在React之外进行状态管理，例如使用ref引用。

作用说明

非受控组件简化了状态管理，特别是在处理复杂的表单或大量数据时。它们通常用于不经常变化的数据或在复杂表单中用于存储文件上传、富文本编辑器等的状态。

示例代码

示例一：受控的输入框

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
    </div>
  );
}

示例二：非受控的输入框

import React from 'react';
import ReactDOM from 'react-dom';

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

  focusInput() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={() => this.focusInput()}>
          Focus the input
        </button>
      </div>
    );
  }
}

ReactDOM.render(<UncontrolledInput />, document.getElementById('root'));

示例三：受控的复选框

import React, { useState } from 'react';

function ControlledCheckbox() {
  const [checked, setChe