站長資訊網
react受控組件和不受控組件的區別：1、受控組件依賴于狀態，而非受控組件不受狀態的控制；2、受控組件只有繼承“React.Component”才會有狀態，而非受控組件則不是只有繼承才有狀態；3、受控組件一般適用于需要動態設置初始值時，非受控組件一般用于無任何動態初始值信息時。
本教程操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
react受控組件和不受控組件的區別
兩者區別
1、受控組件
受控組件依賴于狀態
受控組件的修改會實時映射到狀態值上，此時可以對輸入的內容進行校驗
受控組件只有繼承React.Component才會有狀態
受控組件必須要在表單上使用onChange事件來綁定對應的事件
2、非受控組件
非受控組件不受狀態的控制
非受控組件獲取數據就是相當于操作DOM
非受控組件可以很容易和第三方組件結合，更容易同時集成 React 和非 React 代碼
選擇受控組件還是非受控組件
1、受控組件使用場景：一般用在需要動態設置其初始值的情況。例如：某些form表單信息編輯時，input表單元素需要初始顯示服務器返回的某個值然后進行編輯。
2、非受控組件使用場景：一般用于無任何動態初始值信息的情況。例如：form表單創建信息時，input表單元素都沒有初始值，需要用戶輸入的情況。
擴展知識：
一、受控組件
在HTML中，表單元素的標簽<input>、<textarea>、<select>等的值改變通常是根據用戶輸入進行更新。
在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，這樣表現出用戶輸入任何值都能反應到元素上。
【
