淺談react受控組件與非受控組件

　　在react中，組件內部主要是通過props和state來存儲組件的屬性與狀態的。其中props是通過父組件傳入，在組件內部不能進行修改。而state是保存可變狀態的一個對象，通過this.setState方法進行修改，注意不能直接使用this.state.xx = ?來進行修改，這樣是沒有效果的。每一次setState后都會重新渲染組件。介紹完state后，我們開始介紹受控組件和非受控組件。

受控組件

受控組件，顧名思義是受到控制的組件，那么是通過什么來受到控制呢？

   <input value={this.state.inputValue} />

　　當input的value值為state.inputValue時，當用戶對input進行操作時，沒有對inputValue進行setState()操作，這個值不變，也就意味着input顯示不變。但是如果我們給input一個事件，在事件中進行對state的修改，那么值會如何呢？

 inputChange = e => this.setState({value: e.target.value})    
render() {
    return (
        <input value="this.state.value" onChange={this.inputChange}/>
    )
}

　　在這里，每當用戶輸入時，input觸發onChange事件，調用inputChange函數修改了value值。使用受控組件，每個狀態的改變都有一個與之相關的處理函數。好處是可以直接修改或驗證用戶輸入。

非受控組件

非受控組件不同於受控組件數據是react組件處理的，是通過dom進行處理。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

　　如官方文檔中例子，此時將input通過ref暴露給組件，可以通過this.input進行訪問。