React受控组件与非受控组件详解与应用场景

一、受控组件

简易理解：受我们控制的组件，组件状态全程响应外部数据的组件是受控组件，例如以下username会通过change控制,组件有自主控制权：

class TestComponent extends React.Component {
  constructor(props){
    super(props)
    this.state = {
    username: '' 
  }
}

render(){
  return <input name-'username' value-{this.state.username} onChange={} />
}

二、非受控组件

值和事件都不受控制的组件，需要通过其他标签操作，用ref实现，以下例了中input就是非受控，它的值不能自己控制，通过this.inputRef.current操作。

class TestComponent extends React.Component {
  constructor(props){
    super(props)
    this.inputRef = React.createRef(React)
  }
  render(){
    return <input name='username' ref={this.inputRef}>
  }
}

三、应用场景

   大部分使用受控组件来实现表单，因为非受控组件控制力比较弱，很多场景实现不了，例如即时表单验证之类的拦献不了 ，具体看使用业务情况决定，如果需要操作其他组件值，可以使用Ref操纵。