react非受控元件是什麼意思

在react中，非受控元件是不被父元件控制的元件；非受控元件也就是一個獨立元件，不需要傳值也沒有任何與當前元件的父元件有所交集，在封裝元件時，只有在當前元件只做展示用途且沒有任何不同的時候才會封裝為非受控元件。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react非受控元件是什麼意思

什麼叫非受控元件

我們從兩個字入手,那就是元件,受控與非受控是從元件的角度出發來說出的概念,字面意思就是元件時不被控制的,不被誰控制,當然是不被父元件控制,那麼不受控制的元件有什麼特性,就是一切邏輯只與自身有關,與其他的元件沒有通訊與交集

在HTML當中，像,, 和這類表單元素會維持自身狀態，並根據使用者輸入進行更新。但在React中，這些元件在不加以處理的情況下都是非受控元件,因為你真正使用的時候會發現這些元件是不會自動更新值的,我們輸入的值在不做任何處理的情況是無法拿到使用輸入的值的

舉例

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
    render() {
        return (
            <input />
            //<ABC />
        )
    }
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))

非受控元件的解釋

既然非受控元件是一個與外界無任何交集的元件,那麼我們是不是就用不到非受控元件了,答案是否定的,我們在特定的情況下其實是用得到非受控元件的

輪播元件(非受控),想想一下如果我們頁面需要一個輪播元件,且元件只使用一次不打算複用,我們把輪播的程式碼放到一個輪播元件中,輪播元件是否需要與外界做互動,不需要,那麼我們寫出來的一個不管當前輪播圖如何執行,包括點選事件包括輪播的時間等條件都是寫死的時候,那輪播元件就是一個非受控元件了,當然了這個例子舉得有些牽強,我們在做元件的時候一定是想要一個通用的且可複用的元件的,需要得知輪播當前狀態,那麼就導致我們非受控元件不再適用

靜態頁面開發.在靜態頁面的開發的時候,我們通常不使用框架,只用html單獨寫出檔案,打包後效能可能更佳,但是如果我們專案中某一個頁面是靜態頁面,我們是否就用到了我們的非受控元件,展示的頁面即沒有封裝性,也只能是客製化性的頁面,那我們的頁面元件單獨存在的時候,也就是非受控元件了

非受控元件也就是一個獨立元件,不需要傳值也無任何與當前元件的父元件有所交集,在我們封裝元件的時候,只有在當前元件只做展示用途且無任何不同的時候才會封裝為非受控元件

擴充套件知識：

什麼叫受控元件

這個我們就與非受控元件時相反的,從字面意思就是受轄制,受父級元件所管制的元件,就叫做受控元件

父元件如何對子元件進行控制,當然是通過傳值進行管控,props傳值被子元件所使用,且子元件的內容或方法或展示結果因父元件的傳值而更改的時候,子元件就是一個受父元件管控的受控元件

舉例

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class Input extends Component{
    constructor(){
        super();
        this.state = {val:''};
    }
    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({val})
    }
    render(){
        return (
            <div>
                <p>{this.state.val}</p>
                //<input type="text" value='123' />
                <input type="text" value={this.state.val} onChange={this.handleChange} /> //input就是受控元件 被狀態物件的屬性控制
            </div> 
        )
    }
}
ReactDOM.render(<Input/>,window.app)

我們不要把input看作input元件,我們要把input看作任何一個我們參照或者自己封裝的元件當這個元件被我們傳值之後,哪怕是被我們傳的固定的字串,本質上來講依舊是受控元件,受控元件不是看有沒有資料雙向繫結,而是看本質上有沒有受控,當我們傳遞一個固定值的時候,input元件的值就固定了,無法修改,雖然我們傳遞了props時寫死的值,但是這個值依舊是把input元件進行了控制

受控元件的解釋

受控元件實際上是出現在我們程式設計的方方面面的,我們單獨拿出來的任何一個元件,大概率都是受控元件,畢竟靜態頁面需求還是較少的,我們js大部分時候都是處理邏輯的,那邏輯必然是要有互動的

舉例就是如上inpu元件程式碼,等同與textarea和select元件,我們都是要通過一些引數(props)傳遞去告知元件的具體渲染規則和展示內容的,比如type屬性也是我們進行元件受控的一種

資料的雙向繫結:其實在我們傳遞給value任意一個值或者屬性的時候,就已經把元件的意義變成了受控元件,但是我們繫結onChange的時候,通過onChange給到我們元件一個資料改變時的回撥方法,在回撥方法中我們通過setState進行資料的更改,從而進行render的重新渲染,這就是資料的雙向繫結了,資料驅動檢視,檢視驅動資料嘛

總結:受控元件與非受控元件就是一個概念,表明當前的元件是否受控,是否是一個單獨的與其他內容都無任何互動的元件,簡單來說,完全獨立的一個元件,就可以看作一個非受控元件,其他的都時受控元件

【相關推薦：、】

以上就是react非受控元件是什麼意思的詳細內容，更多請關注TW511.COM其它相關文章！