React学习之进阶非控制型组件（十四）

1.控制与非控制，何区？

非控制型组件知识点非常简单，这里只是为了细分组件功能而增加的模块，对于控制型组件之前我已经说过是由于组件内部通过事件绑定进行控制。

其实不然，真正区分控制型组件和非控制型组件的部分是this.state这个状态标记的属性，因为控制型组件实现的是完全控制，不仅单单是事件响应，仅此而已，它们对数据也进行了强行控制

此为控制型的组件代码

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

此为非控制型组件的代码

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

一个增加了state直接控制数据，而另外一个则是通过ref将DOM实例传递到组件中来，从而实现控制，两个之间最明显的区别就在与控制型组件会对数据的变化进行实时监控，而非控制型组件在将组件渲染到HTML中后，就不会去控制数据了，无论你数据怎么进行输入，非控制型组件都不会进行干扰。

虽然非控制型组件的使用存在一定程度上的便捷性，减少要编辑的代码，但是如果在没有必要减少代码情况下请使用控制型组件，这是为了数据的安全性

2.默认值设定

在非控制型组件中，除了可以对数据进行初始值设定外，就没有什么可以对数据做处理的部件了，你要说有的话，最多在事件触发时处理一遍，但是这只是用来判断数据是否合理，而不是对数据进行处理。

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

额外运用

<input type="checkbox">和<input type="radio">支持的是defaultChecked，而<select>支持的是defaultValue，其他的大家可以探索

下一篇将讲React中的性能优化

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!