受控組件與非受控組件

受控組件

所謂受控組件就是每當表單的狀態發生變化時，都會被寫入到組件的state中，這種組件就被稱爲受控組件。

在受控組件中，組件渲染出的狀態與它的value或checked prop相對應。React通過這種方式消除了組件的局部狀態。

更新state的流程

1. 可以通過在初始state中設置表單的默認值
2. 每當表單的值發生變化，調用onChange事件處理器
3. 事件處理器通過合成事件對象拿到改變後的狀態，並更新應用的state
4. setState觸發視圖的重新渲染，完成表單組件值得更新

每次表單值發生變化時，都會執行上述幾步。這樣統一了組件內部狀態，使表單的狀態更可靠。這也意味着，在執行最後一步setState之前，我們可以對值進行修飾。

例子

class Controlled extends Component{
  constructor(props){
    super(props);
    this.state = {
      inputState: ''
    }
    this.changeHandle = this.changeHandle.bind(this);
  }

  changeHandle(e){
    this.setState({
      inputState: e.target.value.toUpperCase()
    });
  }

  render(){
    const {inputState} = this.state;
    return (
      <div>
        <input type='text' value={inputState} onChange={this.changeHandle}></input>
      </div>
    )
  }
}

上述代碼就是一個典型的受控組件。

在React中，數據是單向流動的，從上面代碼中可以看出表單的數據源於組件的state，並通過props傳入，這也稱爲單向數據綁定。然後，我們又通過onChange事件處理函數將新的表單數據寫會到組件的state，完成了雙向數據綁定。

同時，在setState之前，還對錶單數據進行了轉換成大寫的操作。

非受控組件

如果一個表單組件沒有value props（單選框和複選框對應的是checked prop）時，就可以稱之爲非受控組件。

例子

class Uncontrolled extends Component{
  constructor(props){
    super(props);
    
    this.changeHandle = this.changeHandle.bind(this);
  }

  changeHandle(e){
    const input = this.refs.input;
    input.value = e.target.value.toUpperCase();
  }

  render(){
    return (
      <div>
        <input type='text' ref='input' onChange={this.changeHandle} defaultValue="Shenzhen"></input>
      </div>
    )
  }
}

可以使用defaultValue或defaultChecked來表示組件的默認狀態。

在React中，非受控組件是一種反模式，它的值不受組件自身的state或props控制。通常需要通過添加ref來訪問渲染後的DOM元素。