React中受控元件和非受控元件實例詳解

本文我們將和大家分享React中受控組件和非受控組件實例詳解，在詳解之前我們會簡單介紹一下什麼是受控組件和非受控組件，希望能幫助到大家。

受控元件

在React中，每當表單的狀態改變時，都會被寫入到元件的state中，這種元件在React稱為受控組件。在受控元件中，元件渲染的狀態與它的value或checked相對應。 React透過這種方式消除了元件的局部狀態。 React官方推薦使用受控元件。

受控元件更新state流程：

1. 可以通过在初始state中设置表单的默认值。
2. 每当表单的值发生变化时，调用onChange事件处理器。
3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。
4. setState触发视图的重新渲染，完成表单组件值得更新。

非受控元件

簡單的說，如果一個表單元件沒有value props（單選按鈕和複選框對應的是checked props）就可以稱為非受控元件。這樣，我們可以使用defaultValue和defaultChecked來表示元件的預設狀態。

在React中，非受控元件是一種反模式，它的值不受元件本身的state或props控制，通常需要為其添加ref prop來存取渲染後的底層DOM元素。

對比受控元件和非受控元件

我們剛剛看到透過defaultValue或defaultChecked來設定表單的預設值，它只會被渲染一次，在後續的渲染時並不起作用。

<input
    value={this.state.value}
    onChange={(e) => this.setState({value: e.target.value})}
>

<input 
    defaultValue={this.state.value}
    onChange={e => {this.setState({value: e.target.value})}}
>

在受控元件中，可以將用書輸入的內容輸出展示，而在非受控元件中，如果不綁定onChange事件，我們在文字方塊中輸入任何內容都不會展示。 可以看到受控組件和非受控組件的最大差異就是，非受控組件狀態並不會受應用狀態的控制，應用中也多了局部組件狀態，而受控組件的值來自state。

• 效能上問題

#在受控元件中，每次表單的值都會變更都會呼叫一次onChange時間處理器，這會有一些效能消耗，任然不提倡在React中使用受控元件，這個問題可以透過redux應用架構來達到狀態統一。

相關推薦：

React元件生命週期實例分析

#React元件的生命週期函數是什麼

建構React元件最全方法

以上是React中受控元件和非受控元件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！