React中受控组件和非受控组件

在React里，组件可以被分为两大类：受控组件（Controlled Components）和非受控组件（Uncontrolled Components）。理解这两者之间的区别对于构建高效、可预测的React应用至关重要。

1. 受控组件（Controlled Components）

  受控组件是指其值由React的状态（state）控制的输入元素。这意味着，组件的当前值是由React的状态决定的，并且每次状态更新时，组件都会重新渲染以反映最新的值。

1.1 受控组件的优势

• 预测性：由于组件的值是由React的状态控制的，因此当状态变化时，组件的行为是可预测的。
• 可控性：开发者可以精确地控制组件的值，这在处理复杂的用户交互和数据流时非常有用。
• 组件复用：受控组件可以轻松地在不同的上下文中复用，因为它们的值和行为完全由父组件控制。

1.2 受控组件的局限

• 额外的样板代码：使用受控组件通常需要编写额外的代码来处理状态的更新。
• 性能问题：在某些情况下，过度使用受控组件可能会导致不必要的渲染，影响性能。

1.3 受控组件的代码示例

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.bind(this)} />
    );
  }
}

  在这个示例中，我们创建了一个受控的文本输入框。value属性被绑定到组件的状态this.state.value上，而handleChange方法用于更新状态每当输入框的值发生变化时。

2. 非受控组件（Uncontrolled Components）

  非受控组件是指其值不受React状态控制的输入元素。非受控组件直接使用用户输入的最新值，而不是依赖于React的状态。

2.1 非受控组件的优势

• 简洁性：使用非受控组件可以减少样板代码，使得代码更加简洁。
• 性能：在某些情况下，非受控组件可以提高性能，因为它们不需要在每次值变化时触发状态更新和组件重渲染。

2.2 非受控组件的局限

• 不可预测性：由于React不控制非受控组件的值，因此在某些复杂的场景下，组件的行为可能变得不可预测。
• 难以管理：在复杂的应用中，非受控组件可能导致难以追踪和管理的状态。

2.3 非受控组件的代码示例

class UncontrolledComponent extends React.Component {
  handleSubmit(event) {
    console.log('Submitted value:', event.target.value);
    event.preventDefault();
  }

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

  在这个示例中，我们创建了一个非受控的表单。输入框的defaultValue属性被设置为初始值"Hello!"。当表单被提交时，handleSubmit方法被调用，并打印出输入框的当前值。