我們都知道，有許多的web組件可以被用戶的交互發(fā)生改變，比如：<input>，<select>，或者是我現(xiàn)在正在使用的富文本編輯器。這些組件在日常的開(kāi)發(fā)中很不顯眼，我們可以很輕易的通過(guò)輸入一些內(nèi)容或者設(shè)置元素的value屬性來(lái)改變組件的值。但是，因?yàn)镽eact是單向數(shù)據(jù)流綁定的，這些組件可能會(huì)變得失控：

創(chuàng)新互聯(lián)專注于嘉陵企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),商城系統(tǒng)網(wǎng)站開(kāi)發(fā)。嘉陵網(wǎng)站建設(shè)公司,為嘉陵等地區(qū)提供建站服務(wù)。全流程定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

1.一個(gè)維護(hù)它自己state里的value值的<Input>組件無(wú)法從外部被修改；

2.一個(gè)通過(guò)props來(lái)設(shè)置value值的<Input>組件只能通過(guò)外部控制來(lái)更新。

最近在使用螞蟻金服出品的一條基于react的ant-design UI組件時(shí)遇到一個(gè)問(wèn)題，編輯頁(yè)面時(shí)input輸入框會(huì)展示保存前的數(shù)據(jù)，但是是用defaultValue就是不起作用，輸入框始終為空值而不是具體的傳入的值。具體編輯頁(yè)面中文本框相關(guān)的代碼如下：

    ... //render方法上面的內(nèi)容省略
 <FormItem
   label="問(wèn)題描述："
   hasFeedback
   {...props.formItemLayout}
 >
  <Input type="textarea" defaultValue={props.value}/>
</FormItem>
      //render下面的內(nèi)容省略
      ...

在給代碼段所屬的組件傳遞value props后，文本框中的默認(rèn)值一直為空，因?yàn)樵擁?yè)面所在的狀態(tài)state中，value所對(duì)應(yīng)的狀態(tài)初始值為空，導(dǎo)致后續(xù)異步請(qǐng)求成功后改變value對(duì)應(yīng)的狀態(tài)中的值，仍然顯示為空。

google一下具體原因，原來(lái)React的form表單組件中的defaultValue一經(jīng)傳遞值后，后續(xù)改變defaultValue都將不起作用，被忽略了。

具體來(lái)說(shuō)這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來(lái)實(shí)現(xiàn)。

下面就說(shuō)說(shuō)這個(gè)受控組件與非受控組件，它們都是基于react的form表單組件元素的，具體也可參考react官網(wǎng)這方面介紹

受控組件

就形式上來(lái)說(shuō)，受控組件就是為某個(gè)form表單組件添加value屬性；非受控組件就是沒(méi)有添加value屬性的組件；，受控組件的形式如下形式：

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

添加了value 屬性的表單組件元素其內(nèi)部是不會(huì)維護(hù)自己狀態(tài)state，組件的value值一旦設(shè)置某個(gè)具體值就始終是這個(gè)值，所以需要調(diào)用者來(lái)控制組件value的改變。

這種寫(xiě)法帶來(lái)一個(gè)問(wèn)題：渲染后的input組件的用戶交互，用戶輸入的任何值將不起作用，input輸入框中的值始終為Hello!。這與HTML中input表現(xiàn)不一致。

為此，為了控制該組件，就需要能能夠控制input組件的值，需要借助其內(nèi)部的狀態(tài)state，即組件內(nèi)部要維護(hù)一個(gè)狀態(tài)state以便配合input組件的onChange和setState方法來(lái)完成對(duì)組件的控制；例如對(duì)上面形式可以進(jìn)行封裝一個(gè)inputItem組件，其內(nèi)部維護(hù)一個(gè)state狀態(tài)，具體代碼如下：

 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)}/>
    );
  }
}

這樣就可以在外部像下面這樣調(diào)用InputItem組件了：

<InputItem value={this.state.userName} />

這樣就可以控制react的Input組件了，其實(shí)就是需要借助react的有狀態(tài)component來(lái)完成，因?yàn)橛袪顟B(tài)component可以內(nèi)部維護(hù)state。

非受控組件

表現(xiàn)形式上，react中沒(méi)有添加value屬性的表單組件元素就是非受控組件。表現(xiàn)形式如下：

<input type="text" />

非受控組件在底層實(shí)現(xiàn)時(shí)是在其內(nèi)部維護(hù)了自己的狀態(tài)state；這樣表現(xiàn)出用戶輸入任何值都能反應(yīng)到元素上。

總結(jié)

在使用react component時(shí)，都會(huì)遇到受控組件或者非受控組件；在目前，react組件推薦使用stateless component，但是使用該形式來(lái)實(shí)現(xiàn)react component時(shí)使用非受控組件到倒是沒(méi)有什么大問(wèn)題，若是需要控制受控元素就會(huì)有出現(xiàn)問(wèn)題，表現(xiàn)在：

`受控組件`需要主動(dòng)維護(hù)一個(gè)內(nèi)部state狀態(tài)的，而`stateless component`是無(wú)需維護(hù)組件的state狀態(tài)的，二者有沖突。
所以，受控元素就不能使用stateless component來(lái)創(chuàng)建。

鑒于受控組件與非受控組件的特點(diǎn)，二者應(yīng)用的地方也有所不同，主要表現(xiàn)在：

1. 受控元素，一般用在需要?jiǎng)討B(tài)設(shè)置其初始值的情況；例如某些form表單信息編輯時(shí)，input表單元素需要初始顯示服務(wù)器返回的某個(gè)值然后進(jìn)行編輯。
2. 非受控元素， 一般用于無(wú)任何動(dòng)態(tài)初始值信息的情況； 例如form表單創(chuàng)建信息時(shí)，input表單元素都沒(méi)有初始值，需要用戶輸入的情況

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

標(biāo)題名稱：淺談react受控組件與非受控組件(小結(jié))
分享網(wǎng)址：http://aaarwkj.com/article30/pdeiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、面包屑導(dǎo)航、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)