react受控元件與不受控元件的差異:1、受控元件依賴狀態,而非受控元件不受狀態的控制;2、受控元件只有繼承“React.Component”才會有狀態,而非受控組件則不是只有繼承才有狀態;3、受控組件一般適用於需要動態設定初始值時,非受控組件一般用於無任何動態初始值資訊時。
本教學操作環境:Windows10系統、react17.0.1版、Dell G3電腦。
兩者差異
1、受控元件
受控元件依賴狀態
受控元件的修改會即時對應到狀態值上,此時可以對輸入的內容進行校驗
受控元件只有繼承React.Component才會有狀態
受控元件必須在表單上使用onChange事件來綁定對應的事件
2、非受控元件
非受控元件不受狀態的控制
非受控元件取得資料就是相當於操作DOM
非受控元件可以很容易和第三方元件結合,更容易同時整合React 和非React 程式碼
選擇受控元件或非受控元件
1、受控元件使用場景:一般用在需要動態設定其初始值的情況。例如:某些form表單資訊編輯時,input表單元素需要初始顯示伺服器傳回的某個值然後進行編輯。
2、非受控元件使用情境:一般用於無任何動態初始值資訊的情況。例如:form表單建立資訊時,input表單元素都沒有初始值,需要使用者輸入的情況。
擴充知識:
一、受控元件
在HTML中,表單元素的標籤 、
在React中,可變狀態通常保存在元件的狀態屬性中,並且只能使用setState() 進行更新,而呈現表單的React元件也控制著在後續使用者輸入時該表單中發生的情況,以這種由React控制的輸入表單元素而改變其值的方式,稱為受控元件。
例如,給表單元素input綁定一個onChange事件,當input狀態改變時就會觸發onChange事件,從而更新元件的state。
import React, { Component } from 'react' export default class MyInput extends Component{ constructor(props) { super(props); this.state = { value: 0 } } handleChange = (event)=>{ this.setState({ value: event.target.value }) } render(){ return( <div> <input type="text" value={this.state.value} onChange={this.handleChange} /> </div> ) } }
受控元件更新state的流程
1、 可以透過初始state設定表單的預設值
#2、每當表單的值變更時,請呼叫onChange事件處理器
3、事件處理器透過事件物件event拿到改變後的狀態,並更新元件的state
4、一旦透過setState方法更新state,就會觸發視圖的重新渲染,完成表單元件的更新
React中資料是單項流動的,從範例中,可以看出表單的資料源自於元件的state,並透過props傳入,這也稱為單向資料綁定。接著又透過onChange事件處理器將新的資料寫回state,完成了雙向資料綁定。
二、非受控元件
非受控元件指的是,表單資料由DOM本身處理。即不受setState()的控制,與傳統的HTML表單輸入相似,input輸入值即顯示最新值。
在非受控元件中,可以使用一個ref來從DOM取得表單值。
class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { console.log('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> ); } }
非受控元件在底層實現時是在其內部維護了自己的狀態state,這樣表現出使用者輸入任何值都能反應到元素上。
【相關推薦:javascript影片教學、web前端】
以上是react受控元件和不受控元件的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!