本文主要是介绍react受控组件与非受控组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
React中的组件可以分为受控组件和非受控组件：
受控组件：受控组件是指组件的值受到React组件状态的控制。通常在组件中，我们会通过state来存储组件的值，然后再将state的值传递给组件的props，从而实现组件的双向数据绑定。
例如，一个input输入框的value值就是一个受控组件，其值受到state的控制：
class InputComponent extends React.Component {constructor(props) {super(props);this.state = { value: '' };this.handleChange = this.handleChange.bind(this);}handleChange(event) {this.setState({ value: event.target.value });}render() {return (<input type="text" value={this.state.value} onChange={this.handleChange} />);}
}
非受控组件：非受控组件是指组件的值不受React组件状态的控制，通常是在组件中获取DOM元素的值，然后进行操作。
例如，一个input输入框的defaultValue值就是一个非受控组件，其值由DOM元素控制：
class InputComponent extends React.Component {constructor(props) {super(props);this.inputRef = React.createRef();this.handleClick = this.handleClick.bind(this);}handleClick(event) {console.log(this.inputRef.current.value);}render() {return (<div><input type="text" defaultValue="default" ref={this.inputRef} /><button onClick={this.handleClick}>Get Input</button></div>);}
}
总的来说，受控组件和非受控组件的选择取决于具体的业务需求和开发者的个人习惯。在大多数情况下，如果需要实现表单的双向数据绑定，就应该使用受控组件；而如果需要获取DOM元素的值，就应该使用非受控组件。
这篇关于react受控组件与非受控组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
