React中的受控组件和非受控组件

React中的受控组件和非受控组件📚

非受控组件

class Login extends React.Component{
	render(){
		return(
            <input ref={c => this.username = c} type="text" name="username"/>
		)
	}
}

受控组件

class Login extends React.Component{
	state = {
		username:''
	}
	saveUsername = event => this.setState({username:event.target.value});
	render(){
		return(
            <input onChange={this.saveUsername} type="text" name="username"/>
		)
	}
}

总结🏆

• 受控组件：页面中所有输入类的DOM，比如说input，随着用户的输入，React就可以把数据维护到状态state里，等需要用到数据的时候直接从状态里就可以拿到数据，这就是受控组件。
• 非受控组件：需要数据的时候才从DOM元素中去拿数据。
• 受控组件可以减少使用ref