React受控组件和非受控组件

在React中，组件可以分为受控和非受控组件。了解这些组件的差异将帮助你更好地设计和构建React应用程序。

受控组件

受控组件是由React状态控制的组件，其值通过props从父组件传递。在受控组件中，每次用户与组件交互时，都会通过回调函数将值更新到父组件中。当从父组件传递的值发生变化时，组件就会重新渲染。以下是一个受控组件的示例：

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

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

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

在这个例子中，input组件的value属性被绑定到ControlledComponent组件的状态中。每次用户与input交互时，handleChange回调函数都会被调用，更新ControlledComponent组件的状态。当状态改变时，组件重新渲染，从而更新渲染output元素的值。

非受控组件

非受控组件是由DOM自己管理的组件，它们的值不受React状态管理。在非受控组件中，组件会自己管理它的状态，并且它的值只有在用户提交表单时才会更新，而不是在每次用户输入时都更新。以下是一个非受控组件的示例：

class UncontrolledComponent extends React.Component {
  handleSubmit = (event) => {
    console.log('Input Value: ', this.input.value);
    event.preventDefault();
  };

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

在这个例子中，input组件通过ref属性引用到组件的一个实例。在handleSubmit函数中，我们可以通过引用来获取input组件的值，并在控制台中打印出来。

受控组件 vs 非受控组件

受控组件和非受控组件的主要区别在于数据的流动方式。在受控组件中，数据是通过props从父组件传递到子组件的，而在非受控组件中，数据是通过引用到DOM元素的实例来传递的。

使用受控组件的好处是可以更好地控制应用程序的状态，并且在多个组件之间共享和更新状态非常容易。非受控组件可以更快地编写，但对于表单的验证和处理来说，需要更多的自定义代码。

一般来说，在构建表单时，你应该优先考虑受控组件。只有当表单过于复杂或非标准时，才会选择非受控组件。

参考资料：React 受控组件和非受控组件