web编程开发中的常见组件类型?
发布网友
发布时间：2023-05-29 06:19
共1个回答
热心网友
时间：2024-12-13 11:31
组件化的编程开发形式相信大家应该都听过或者说见过了吧。今天我们就一起来了解和学习一下关于web开发的组件类型。
这些组件在日常的开发中很不显眼，我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值。但是，电脑培训发现因为React是单向数据流绑定的，这些组件可能会变得失控：
1.一个维护它自己state里的value值的组件无法从外部被修改;
2.一个通过props来设置value值的组件只能通过外部控制来更新。
近在使用蚂蚁金服出品的一条基于react的ant-designUI组件时遇到一个问题，编辑页面时input输入框会展示保存前的数据，但是是用defaultValue就是不起作用，输入框始终为空值而不是具体的传入的值。
在给代码段所属的组件传递valueprops后，文本框中的默认值一直为空，因为该页面所在的状态state中，value所对应的状态初始值为空，导致后续异步请求成功后改变value对应的状态中的值，仍然显示为空。
google一下具体原因，原来React的form表单组件中的defaultValue一经传递值后，后续改变defaultValue都将不起作用，被忽略了。
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。
下面就说说这个受控组件与非受控组件，它们都是基于react的form表单组件元素的，具体也可参考react官网这方面介绍
受控组件
就形式上来说，受控组件就是为某个form表单组件添加value属性;非受控组件就是没有添加value属性的组件;
添加了value属性的表单组件元素其内部是不会维护自己状态state，组件的value值一旦设置某个具体值就始终是这个值，所以需要调用者来控制组件value的改变。
这种写法带来一个问题：渲染后的input组件的用户交互，用户输入的任何值将不起作用，input输入框中的值始终为Hello!。这与HTML中input表现不一致。
非受控组件
表现形式上，react中没有添加value属性的表单组件元素就是非受控组件。
非受控组件在底层实现时是在其内部维护了自己的状态state;这样表现出用户输入任何值都能反应到元素上。
