react受控元件和不受控元件的差別是什麼

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中，表單元素的標籤d5fd7aea971a85678ba271703566ebfd 、4750256ae76b6b9d804861d8f69e79d3、221f08282418e2996498697df914ce4e等的值改變通常是根據使用者輸入進行更新。

在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中文網其他相關文章！