react中的可控组件与非可控组件

上篇分享介绍到了状态提升的内容，在结尾部分提到了本篇要介绍的主角——可控组件与非可控组件，下面就开始学习吧

区别

可控组件与非可控组件的核心区别就是在于输入的值是否与state的值对应

可控组件

可控组件的好处

• 结合了react的数据流
• 数据在state中时，修改和使用更加方便，只需要对响应的state进行修改就可以，不需要获取DOM，对DOM进行操作

代码展示

export class Control extends Component {
  constructor(props) {
    super(props);
    this.state={
      value: 'hello world'
    }
  }
  onChange = (e) => {
    this.setState({
      value: e.target.value
    });
  }
  render() {
    return (
      <input value={this.state.value} onChange={this.onChange} />
    );
  }
}
复制代码

非可控组件

不可控组件中间的数据的状态是未知的，只能在dom节点中获取，而可控组件中当值变化时会随时同步到state中，状态的变化一直是保持同步的

非可控组件获取值时需要使用ref来从dom节点中拿值

代码展示

export class UnControl extends Component {
  onClick = () => {
    let input = this.refs.input;
    alert(input.value)
  }
  render() {
    return (
      <div>
        <input defaultValue="fuck" ref="input" />
        <button onClick={this.onClick}>点击</button>
      </div>
    );
  }
}
复制代码

OK，今天的学习笔记先到这里了，晚上回家后会写一篇最近在工作中遇到的定时器的坑

转载于:https://juejin.im/post/5ca030866fb9a05e196805b5