认识达内从这里开始

组件化的编程开发形式相信大家应该都听过或者说见过了吧。今天我们就一起来了解和学习一下关于web开发的组件类型。

这些组件在日常的开发中很不显眼，我们可以很轻易的通过输入一些内容或者设置元素的value属性来改变组件的值。但是，因为React是单向数据流绑定的，这些组件可能会变得失控：

1.一个维护它自己state里的value值的组件无法从外部被修改;

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

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

在给代码段所属的组件传递value props后，文本框中的默认值一直为空，因为该页面所在的状态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;这样表现出用户输入任何值都能反应到元素上。

在使用react component时，都会遇到受控组件或者非受控组件;在目前，react组件推荐使用stateless component，但是使用该形式来实现react component时使用非受控组件到倒是没有什么大问题。

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

受控元素，一般用在需要动态设置其初始值的情况;例如某些form表单信息编辑时，input表单元素需要初始显示服务器返回的某个值然后进行编辑。

非受控元素， 一般用于无任何动态初始值信息的情况; 例如form表单创建信息时，input表单元素都没有初始值，需要用户输入的情况

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!