深刻解析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，快速升職加薪，走上人生巔峯。