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

区别

可控组件与非可控组件的核心区别就是在于输入的值是否与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 (          );  }}复制代码

非可控组件

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

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

代码展示

export class UnControl extends Component {  onClick = () => {    let input = this.refs.input;    alert(input.value)  }  render() {    return (      
    
        
             
     点击      
    
    );  }}复制代码

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