谈谈你对React中受控和非受控组件的理解？应用场景？

本文转载自微信公众号《JS日报》，作者慧慧。转载本文请联系JS每日一问公众号。1.受控组件受控组件，简单来说，就是在我们控制之下的组件。组件的状态在整个过程中响应外部数据。一个简单的例子：classTestComponenttextendsReact.Component{constructor(props){super(props);this.state={username:'lindaidai'};}render(){return}}这时候我们在输入框中输入内容的时候，会发现输入的内容无法显示，也就是input标签是可读状态，因为这个值是由this.state控制的。用户名。当用户输入新的内容时，this.state.username不会自动更新，所以输入的内容不会改变。如果要释放控件，可以给input标签设置onChange事件，输入时触发该事件函数，实现函数内部状态的更新，使输入框的内容页面发生变化。因此，我们一般需要受控组件的初始状态和状态更新事件函数。2.非受控组件非受控组件，简单来说就是不受我们控制的组件，一般在初始化时接受外部数据，然后在内部存储自己的状态。需要的时候，可以使用ref来查询DOM并找到它的当前值，如下所示：);}handleSubmit=(e)=>{console.log('我们可以得到输入中的值',this.inputRef.current.value);e.preventDefault();}render(){return(this.handleSubmit(e)}>)}}详情关于refs的使用，可以参考之前的文章三、应用场景大多数时候，推荐使用受控组件来实现表单，因为在受控组件中，表单数据是由React组件处理的。如果选择非受控组件，控制能力弱，表单数据由DOM自己处理，但更方便快捷，代码量更少。对于两者的区别，其应用场景如下图所示：参考http://meloguo.com/2018/10/08/ControlledandUncontrolledComponents/https://zhuanlan.zhihu.com/p/37579677