React `controlled` 及 `uncontrolled` 组件

通过 props 来设置其 value 值的组件便是一种 controlled 组件。典型的 form 表单中，像

输入框 <input>
下拉框 <select>
多选框 <input type="checkbox">
单选框 <input type="radio">
文本框 <textarea>

这些，都可通过 props 来设置初始值，同时通过监听其身上的 onChanges 事件来将最新的值回传到 React 中。这样，组件的值便始终与 React 中的状态是同步的。

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

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

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

如上， controlled 类型的组件需要在组件中有对应的 state 来保存相应的值。同时需要为组件编写值更新后的监听逻辑。

对应的 uncontrolled 类型，便方便得多，它其实就是普通的 HTML 标签。

对于 uncontrolled 类型的组件，通过 ref 来获取它身上的 value 值。

class Form extends Component {
  handleSubmitClick = () => {
    const name = this._name.value;
    // do something with `name`
  }

  render() {
    return (
      <div>
        <input type="text" ref={input => this._name = input} />
        <button onClick={this.handleSubmitClick}>Sign up</button>
      </div>
    );
  }
}

可以看出，uncontorlled 类型的组件，其值是存储在 DOM 节点上的，在需要的时候，比如表单提交时，再通过 ref 获取到相应的 DOM 节点取出它的值。

对比之下，controlled 类型的组件是时实地将最新的值推送（push）到 React 中，而 uncontrolled 类型的组件是在需要的时候去拉取（pull）它身上的值。

对比与取舍

虽然 ref 在官方文档中是不推荐的，也不代表说 uncontrolled 类型的组件就不能使用；虽然 controlled 类型的组件这种，数据走 state 更新和维护的方式，更加 React 一点，也不是说在编写表单时就需要全部使用 controlled 类型的组件。两者在不同情况下可以*取舍，完全看需要。

controlled 类型的组件虽然写起来会比较麻烦，其值与 React state 始终同步，所以有一些优点，

很方便地对用户输入的值进行校验，然后展示相应的错误信息。
可以时实地格式化用的输入，对于特定类型的值比如信用卡，手机等。
根据用户的填写情况时实将表单的提交按钮禁用或启用。

所以如果需要上述这些东西，可以考虑 controlled 类型来编写组件，而 uncontrolled 类型代码上写起来很简洁点，少了 state 及事件绑定，可用在功能简单，或者 React 快速上手，快速实现功能的场景。

码农公寓

React `controlled` 及 `uncontrolled` 组件

对比与取舍

相关资源

码农公寓

对比与取舍

相关资源

相关文章