在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中受控元件和非受控元件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
