raect - 受控组件与非受控组件的选用标准

1.非受控组件

表单数据交由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>
)
}

2.受控组件

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

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

总结：受控组件和非受控组件都有其特点，应该根据需求场景进行选择，在大多数情况下，推荐使用受控组件处理表单数据，如果表单在数据交互方面比较简单，使用非受控组件，否则使用受控组件。