浅谈react受控组件与非受控组件(小结)

2023-09-16 14:10:05 169

我们都知道，有许多的web组件可以被用户的交互发生改变，比如：，组件无法从外部被修改；

2.一个通过props来设置value值的组件只能通过外部控制来更新。

最近在使用蚂蚁金服出品的一条基于react的ant-designUI组件时遇到一个问题，编辑页面时input输入框会展示保存前的数据，但是是用defaultValue就是不起作用，输入框始终为空值而不是具体的传入的值。具体编辑页面中文本框相关的代码如下：

...//render方法上面的内容省略



//render下面的内容省略
...

在给代码段所属的组件传递valueprops后，文本框中的默认值一直为空，因为该页面所在的状态state中，value所对应的状态初始值为空，导致后续异步请求成功后改变value对应的状态中的值，仍然显示为空。

google一下具体原因，原来React的form表单组件中的defaultValue一经传递值后，后续改变defaultValue都将不起作用，被忽略了。

具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。

下面就说说这个受控组件与非受控组件，它们都是基于react的form表单组件元素的，具体也可参考react官网这方面介绍

受控组件

就形式上来说，受控组件就是为某个form表单组件添加value属性；非受控组件就是没有添加value属性的组件；，受控组件的形式如下形式：

render:function(){
return;
}

添加了value属性的表单组件元素其内部是不会维护自己状态state，组件的value值一旦设置某个具体值就始终是这个值，所以需要调用者来控制组件value的改变。

这种写法带来一个问题：渲染后的input组件的用户交互，用户输入的任何值将不起作用，input输入框中的值始终为Hello!。这与HTML中input表现不一致。

为此，为了控制该组件，就需要能能够控制input组件的值，需要借助其内部的状态state，即组件内部要维护一个状态state以便配合input组件的onChange和setState方法来完成对组件的控制；例如对上面形式可以进行封装一个inputItem组件，其内部维护一个state状态，具体代码如下：

exportdefaultclassInputItemextendsReact.Component{
constructor(props){
super(props);
this.state={
value:""
}
}

componentWillReceiveProps(nextProps){
this.setState({
value:nextProps.value
})
}

_onChange(evt){
this.setState({
value:evt.target.value
})
}

render(){
return(

);
}
}

这样就可以在外部像下面这样调用InputItem组件了：

这样就可以控制react的Input组件了，其实就是需要借助react的有状态component来完成，因为有状态component可以内部维护state。

非受控组件

表现形式上，react中没有添加value属性的表单组件元素就是非受控组件。表现形式如下：

非受控组件在底层实现时是在其内部维护了自己的状态state；这样表现出用户输入任何值都能反应到元素上。

总结

在使用reactcomponent时，都会遇到受控组件或者非受控组件；在目前，react组件推荐使用statelesscomponent，但是使用该形式来实现reactcomponent时使用非受控组件到倒是没有什么大问题，若是需要控制受控元素就会有出现问题，表现在：

`受控组件`需要主动维护一个内部state状态的，而`statelesscomponent`是无需维护组件的state状态的，二者有冲突。
所以，受控元素就不能使用statelesscomponent来创建。

鉴于受控组件与非受控组件的特点，二者应用的地方也有所不同，主要表现在：

受控元素，一般用在需要动态设置其初始值的情况；例如某些form表单信息编辑时，input表单元素需要初始显示服务器返回的某个值然后进行编辑。
非受控元素，一般用于无任何动态初始值信息的情况；例如form表单创建信息时，input表单元素都没有初始值，需要用户输入的情况

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

浅谈react受控组件与非受控组件(小结)

热门推荐

随机推荐