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` 组件

对比与取舍

相关资源

猜你喜欢