深刻解析React受控组件与非受控组件

本篇文章主要介绍了深刻解析React受控组件与非受控组件，写的十分的全面细致，具备必定的参考价值，对此有须要的朋友能够参考学习下。若有不足之处，欢迎批评指正。

咱们都知道，有许多的web组件能够被用户的交互发生改变，好比：，，或者是我如今正在使用的富文本编辑器。这些组件在平常的开发中很不显眼，咱们能够很轻易的经过输入一些内容或者设置元素的value属性来改变组件的值。可是，由于React是单向数据流绑定的，这些组件可能会变得失控： 1.一个维护它本身state里的value值的组件没法从外部被修改； 2.一个经过props来设置value值的组件只能经过外部控制来更新。 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题，编辑页面时input输入框会展现保存前的数据，可是是用defaultValue就是不起做用，输入框始终为空值而不是具体的传入的值。具体编辑页面中文本框相关的代码以下：

... //render方法上面的内容省略
 <FormItem
   label="问题描述："
   hasFeedback
   {...props.formItemLayout}
 >
  <Input type="textarea" defaultValue={props.value}/>
</FormItem>
      //render下面的内容省略
      ...
复制代码

在给代码段所属的组件传递value props后，文本框中的默认值一直为空，由于该页面所在的状态state中，value所对应的状态初始值为空，致使后续异步请求成功后改变value对应的状态中的值，仍然显示为空。 google一下具体缘由，原来React的form表单组件中的defaultValue一经传递值后，后续改变defaultValue都将不起做用，被忽略了。 具体来讲这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可使用受控组件来实现。 下面就说说这个受控组件与非受控组件，它们都是基于react的form表单组件元素的，具体也可参考react官网这方面介绍

受控组件

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

render: function() {
  return <input type="text" value="Hello!" />;
 }
复制代码

添加了value 属性的表单组件元素其内部是不会维护本身状态state，组件的value值一旦设置某个具体值就始终是这个值，因此须要调用者来控制组件value的改变。 这种写法带来一个问题：渲染后的input组件的用户交互，用户输入的任何值将不起做用，input输入框中的值始终为Hello!。这与HTML中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
    })/欢迎加入前端全栈开发交流圈一块儿吹水聊天学习交流：619586920
  }
 
  _onChange(evt){
    this.setState({
      value: evt.target.value
    })
  }
 
  render(){
    return (
      <input type="text"
        value={this.state.value} 
        onChange={this._onChange.bind(this)}/>
    );/欢迎加入前端全栈开发交流圈一块儿吹水聊天学习交流：619586920
  }
}
复制代码

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

<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状态的，两者有冲突。欢迎加入前端全栈开发交流圈一块儿吹水聊天学习交流：619586920 因此，受控元素就不能使用stateless component来建立。 鉴于受控组件与非受控组件的特色，两者应用的地方也有所不一样，主要表如今：

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

结语

感谢您的观看，若有不足之处，欢迎批评指正。

本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同窗，欢迎加入Q群：864305860，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。 最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。