受控组件与费受控组件

受控组件就是为某个form表单组件添加value属性。
形式如下：

 render:function(){return <input type="text" value="Hello!" />}

添加了value属性的表单组件元素其内部是不会维护自己状态state，组件的value值一旦设置某个具体值就始终是这个值，所以需要调用者来控制组件value的改变。
这种写法会带来一个问题：渲染后input组建的用户交互，用户输入的任何值将不起作用，input输入框中的值始终为Hello！这与input表现不一致。
为此，为了控制该组件，就需要能够控制input组件的值，需要借助其内部的状态state，即组件内部要维护一个状态state以便于配合input组建的onChange和setState方法来完成对组建的控制；例如对上面形式可以进行封装一个inputItem组件，其内部维护一个state状态，具体代码如下：

 export default class InputItem extends React.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 (<input type="text" value={this.state.value} onChange={this._onChange.bind(this)}/>);}}

这样就可以在外部调用组件了：

 <InputItem value="this.state.userName" />

这样就可以控制react的input组件了，其实就是需要借助react的有状态component来完成，因为有状态component可以内部维护state。
非受控组件表现形式上，react中没有添加value属性的表单组件元素就是非受控组件。表现形式如下：

 <input type="text" />

非抽空组件再底层实现时实在其内部维护了自己的状态state，这样表现出用户输入任何职都能反映到
元素上。

总结

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

`受控组件`需要主动维护一个内部state状态的，而`stateless component`是无需维护组件的state状态的，二者有冲突。

所以，受控元素就不能使用stateless component来创建。

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

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

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

受控组件与费受控组件相关推荐

[react] 受控组件和非受控组件有什么区别？
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介我 ...
深入react技术栈(10):受控组件和非受控组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣受控组件非受控组件受控组件和非受控组件的区别文章参考深入React技术栈
受控组件和非受控组件
受控组件和非受控组件 React的受控组件与非受控组件的概念是相对于表单而言的,在React中表单元素通常会持有一下内部的state,因此它的工作方式与其他HTML元素不一样,而获取表单元素内部sta ...
React中受控组件和非受控组件
受控组件在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
React-表单处理（受控组件，非受控组件）
受控组件: value值受到了react状态控制的表单元素 React中将state中的数据与表单元素的value值绑定到了一起,由state的值来控制表单元素的值非受控组件: 非受控组件借助于re ...
React---什么是受控组件、非受控组件
受控组件: 在随后的用户输入中,能够控制表单中输入元素的组件被称为受控组件,即每个状态更改都有一个相关联的处理程序. 例如,我们使用下面的 handleChange 函数将输入框的值转换成大写: ha ...
【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...
【REACT-受控组件和非受控组件】
REACT-受控组件和非受控组件概述受控组件非受控组件受控组件应用ToDoList 概述 React中的组件根据是否受React控制可分为受控的和非受控的. React 中的受控组件和非受控组 ...

受控组件与费受控组件

总结

受控组件与费受控组件相关推荐

最新文章

热门文章