受控组件和非受控组件的选用标准

非受控组件

它指的是表单数据交由DOM节点管理，这就是非受控组件。特点是表单数据在需要时进行获取，代码实现相对简单。例如：

function App(){
    const userInput = useRef();
    function handleSubmit(){
        const username = userInput.current.value;
    }
    return <form onSubmit={handleSubmit}>
        <input type="text" ref={userInput} />
        <input type="submit"/>    
    </form>;
}

受控组件

它是表单数据交由state对象管理。特点是可以实时得到表单数据，代码相对复杂。

class App extends Component{
    state = { username:'' };
    handleChanage(event){
        this.setState({
            username: event.target.value
        });
    }
    render(){
        return <form>
            <input type="text" value={this.state.username}
                onChange={this.handleChange.bind(this)} />
        </form>
    }
}

选用标准

以上是受控组件和非受控组件的回顾，那平时开发过程中，如何去选择到底是使用受控组件还是使用非受控组件呢？其实受控组件和⾮受控组件都有其特点, 应该根据需求场进⾏选择。在⼤多数情况下, 推荐使⽤受控组件处理表单数据。如果表单在数据交互⽅⾯⽐简单, 使⽤⾮受控表单, 否则使⽤受控表单。

场景	非受控	受控
表单提交时取值	✅	✅
表单提交时验证	✅	✅
表单项元素实时验证	❌	✅
根据条件禁用提交按钮	❌	✅
强制输入内容的格式	❌	✅
一个数据的多个输入	❌	✅