ReactJS 中的受控组件与非受控组件

在 ReactJS 中，组件分为受控组件和非受控组件两种。它们的主要区别在于是否由 ReactJS 来控制组件的状态。

受控组件

受控组件顾名思义是由 ReactJS 来控制组件的状态，在组件中，状态值都由 state 属性来控制，同时也必须在 render() 函数中进行绑定。事件处理函数也都必须在组件中声明和绑定。举个例子，我们来看下面这段代码：

import React from 'react';

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

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.inputValue);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

在上述代码中，input 元素的 value 属性以及 onChange 事件都由 ReactJS 来控制和绑定。因此，这个组件就是一个典型的受控组件。这种方式可以更好地控制和管理组件的状态，避免出现一些奇怪的 bug。但是，需要注意的是，由于每次 input 的值的变化都会触发组件的重新渲染，所以会影响到组件的性能。

非受控组件

相对于受控组件，非受控组件更像是传统的 HTML 元素，其状态值是由 DOM 元素本身来维护的。因此，非受控组件必须在事件处理函数中访问 DOM 元素的值，而不是直接从 state 属性中取得。

下面是一个非受控组件的例子：

import React from 'react';

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.inputRef.current.value);
    event.preventDefault();
  }

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

在这个例子中，input 元素没有任何绑定，状态值由 DOM 元素本身维护，我们通过 React.createRef() 创建了一个 ref 来访问 input 元素的值。

总结

无论是受控组件还是非受控组件都有其优点和缺点。在实际开发中，我们可以按照具体需求来选择使用哪种方式的组件。

受控组件的优点是可以更好的控制组件的状态，但是每次状态的变化都会导致组件的重新渲染，影响了组件的性能。因此，我们应该在保证组件状态可控的前提下，尽量减少组件的渲染。

非受控组件的优点是更像传统的 HTML 元素，状态值由 DOM 元素本身维护，并且不会影响组件的性能。但是，由于组件的状态是不可控的，所以需要更加小心地处理组件的状态，避免出现一些意外的 bug。