91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

react受控組件和不受控組件的區別有哪些

發布時間:2022-06-28 09:37:03 來源:億速云 閱讀:170 作者:iii 欄目:web開發

今天小編給大家分享的是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中,表單元素的標簽<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,這樣表現出用戶輸入任何值都能反應到元素上。

關于react受控組件和不受控組件的區別有哪些就分享到這里了,希望以上內容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

方正县| 抚顺县| 青神县| 正蓝旗| 乐清市| 湘潭市| 舟山市| 古交市| 格尔木市| 花莲市| 南雄市| 庐江县| 河西区| 定西市| 梅河口市| 保亭| 东丰县| 浦北县| 静宁县| 开封县| 建水县| 库伦旗| 如皋市| 闽侯县| 襄城县| 泗水县| 基隆市| 措美县| 石棉县| 灵川县| 仙居县| 正定县| 三都| 长宁县| 鱼台县| 庆阳市| 上蔡县| 鸡东县| 呈贡县| 崇仁县| 旬邑县|