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

引言

最近在使用螞蟻金服出品的一條基於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!

為此，為了控制該元件，就需要能能夠控制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
        })
    }

    _onChange(evt){
        this.setState({
            value: evt.target.value
        })
    }

    render(){
        return (
            <input type="text" 
                value={this.state.value} 
                onChange={this._onChange.bind(this)}/>
        );
    }
}

這樣就可以在外部像下面這樣呼叫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狀態的，二者有衝突。

所以，受控元素就不能使用stateless component來建立。

鑑於受控元件與非受控元件的特點，二者應用的地方也有所不同，主要表現在：

• 受控元素，一般用在需要動態設定其初始值的情況；例如某些form表單資訊編輯時，input表單元素需要初始顯示伺服器返回的某個值然後進行編輯。

• 非受控元素， 一般用於無任何動態初始值資訊的情況； 例如form表單建立資訊時，input表單元素都沒有初始值，需要使用者輸入的情況

最後說明一下，本人才疏學淺，有什麼不對的地方希望大家批評指正！！！

引言

最近在使用螞蟻金服出品的一條基於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
        })
    }

    _onChange(evt){
        this.setState({
            value: evt.target.value
        })
    }

    render(){
        return (
            <input type="text" 
                value={this.state.value} 
                onChange={this._onChange.bind(this)}/>
        );
    }
}

這樣就可以在外部像下面這樣呼叫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狀態的，二者有衝突。

所以，受控元素就不能使用stateless component來建立。

鑑於受控元件與非受控元件的特點，二者應用的地方也有所不同，主要表現在：

• 受控元素，一般用在需要動態設定其初始值的情況；例如某些form表單資訊編輯時，input表單元素需要初始顯示伺服器返回的某個值然後進行編輯。

• 非受控元素， 一般用於無任何動態初始值資訊的情況； 例如form表單建立資訊時，input表單元素都沒有初始值，需要使用者輸入的情況

最後說明一下，本人才疏學淺，有什麼不對的地方希望大家批評指正！！！