react受控組件和不受控組件的區(qū)別：1、受控組件依賴于狀態(tài)，而非受控組件不受狀態(tài)的控制；2、受控組件只有繼承“React.Component”才會有狀態(tài)，而非受控組件則不是只有繼承才有狀態(tài)；3、受控組件一般適用于需要動態(tài)設(shè)置初始值時，非受控組件一般用于無任何動態(tài)初始值信息時。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react受控組件和不受控組件的區(qū)別

兩者區(qū)別

1、受控組件

受控組件依賴于狀態(tài)

受控組件的修改會實時映射到狀態(tài)值上，此時可以對輸入的內(nèi)容進行校驗

受控組件只有繼承React.Component才會有狀態(tài)

受控組件必須要在表單上使用onChange事件來綁定對應(yīng)的事件

2、非受控組件

非受控組件不受狀態(tài)的控制

非受控組件獲取數(shù)據(jù)就是相當于操作DOM

非受控組件可以很容易和第三方組件結(jié)合，更容易同時集成 React 和非 React 代碼

選擇受控組件還是非受控組件

1、受控組件使用場景：一般用在需要動態(tài)設(shè)置其初始值的情況。例如：某些form表單信息編輯時，input表單元素需要初始顯示服務(wù)器返回的某個值然后進行編輯。

2、非受控組件使用場景：一般用于無任何動態(tài)初始值信息的情況。例如：form表單創(chuàng)建信息時，input表單元素都沒有初始值，需要用戶輸入的情況。

擴展知識：

一、受控組件

在HTML中，表單元素的標簽<input>、<textarea>、<select>等的值改變通常是根據(jù)用戶輸入進行更新。

在React中，可變狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能使用 setState() 進行更新，而呈現(xiàn)表單的React組件也控制著在后續(xù)用戶輸入時該表單中發(fā)生的情況，以這種由React控制的輸入表單元素而改變其值的方式，稱為受控組件。

比如，給表單元素input綁定一個onChange事件，當input狀態(tài)發(fā)生變化時就會觸發(fā)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中設(shè)置表單的默認值

2、每當表單的值發(fā)生變化時，調(diào)用onChange事件處理器

3、事件處理器通過事件對象event拿到改變后的狀態(tài)，并更新組件的state

4、一旦通過setState方法更新state，就會觸發(fā)視圖的重新渲染，完成表單組件的更新

React中數(shù)據(jù)是單項流動的，從示例中，可以看出表單的數(shù)據(jù)來源于組件的state，并通過props傳入，這也稱為單向數(shù)據(jù)綁定。然后又通過onChange事件處理器將新的數(shù)據(jù)寫回到state，完成了雙向數(shù)據(jù)綁定。

二、非受控組件

非受控組件指的是，表單數(shù)據(jù)由DOM本身處理。即不受setState()的控制，與傳統(tǒng)的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>     );   } }

非受控組件在底層實現(xiàn)時是在其內(nèi)部維護了自己的狀態(tài)state，這樣表現(xiàn)出用戶輸入任何值都能反應(yīng)到元素上。

【