react非受控組件指的是什么

這篇文章主要介紹“react非受控組件指的是什么”，在日常操作中，相信很多人在react非受控組件指的是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”react非受控組件指的是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

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

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

react非受控組件是什么意思

什么叫非受控組件

我們從兩個字入手,那就是組件,受控與非受控是從組件的角度出發(fā)來說出的概念,字面意思就是組件時不被控制的,不被誰控制,當(dāng)然是不被父組件控制,那么不受控制的組件有什么特性,就是一切邏輯只與自身有關(guān),與其他的組件沒有通信與交集

在HTML當(dāng)中，像,, 和 這類表單元素會維持自身狀態(tài)，并根據(jù)用戶輸入進(jìn)行更新。但在React中，這些組件在不加以處理的情況下都是非受控組件,因?yàn)槟阏嬲褂玫臅r候會發(fā)現(xiàn)這些組件是不會自動更新值的,我們輸入的值在不做任何處理的情況是無法拿到使用輸入的值的

舉例

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

非受控組件的解釋

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

輪播組件(非受控),想想一下如果我們頁面需要一個輪播組件,且組件只使用一次不打算復(fù)用,我們把輪播的代碼放到一個輪播組件中,輪播組件是否需要與外界做交互,不需要,那么我們寫出來的一個不管當(dāng)前輪播圖如何運(yùn)行,包括點(diǎn)擊事件包括輪播的時間等條件都是寫死的時候,那輪播組件就是一個非受控組件了,當(dāng)然了這個例子舉得有些牽強(qiáng),我們在做組件的時候一定是想要一個通用的且可復(fù)用的組件的,需要得知輪播當(dāng)前狀態(tài),那么就導(dǎo)致我們非受控組件不再適用

靜態(tài)頁面開發(fā).在靜態(tài)頁面的開發(fā)的時候,我們通常不使用框架,只用html單獨(dú)寫出文件,打包后性能可能更佳,但是如果我們項(xiàng)目中某一個頁面是靜態(tài)頁面,我們是否就用到了我們的非受控組件,展示的頁面即沒有封裝性,也只能是定制性的頁面,那我們的頁面組件單獨(dú)存在的時候,也就是非受控組件了

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

擴(kuò)展知識：

什么叫受控組件

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

父組件如何對子組件進(jìn)行控制,當(dāng)然是通過傳值進(jìn)行管控,props傳值被子組件所使用,且子組件的內(nèi)容或方法或展示結(jié)果因父組件的傳值而更改的時候,子組件就是一個受父組件管控的受控組件

舉例

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就是受控組件 被狀態(tài)對象的屬性控制
            </div> 
        )
    }
}
ReactDOM.render(<Input/>,window.app)

我們不要把input看作input組件,我們要把input看作任何一個我們引用或者自己封裝的組件當(dāng)這個組件被我們傳值之后,哪怕是被我們傳的固定的字符串,本質(zhì)上來講依舊是受控組件,受控組件不是看有沒有數(shù)據(jù)雙向綁定,而是看本質(zhì)上有沒有受控,當(dāng)我們傳遞一個固定值的時候,input組件的值就固定了,無法修改,雖然我們傳遞了props時寫死的值,但是這個值依舊是把input組件進(jìn)行了控制

受控組件的解釋

受控組件實(shí)際上是出現(xiàn)在我們編程的方方面面的,我們單獨(dú)拿出來的任何一個組件,大概率都是受控組件,畢竟靜態(tài)頁面需求還是較少的,我們js大部分時候都是處理邏輯的,那邏輯必然是要有交互的

舉例就是如上inpu組件代碼,等同與textarea和select組件,我們都是要通過一些參數(shù)(props)傳遞去告知組件的具體渲染規(guī)則和展示內(nèi)容的,比如type屬性也是我們進(jìn)行組件受控的一種

數(shù)據(jù)的雙向綁定:其實(shí)在我們傳遞給value任意一個值或者屬性的時候,就已經(jīng)把組件的意義變成了受控組件,但是我們綁定onChange的時候,通過onChange給到我們組件一個數(shù)據(jù)改變時的回調(diào)方法,在回調(diào)方法中我們通過setState進(jìn)行數(shù)據(jù)的更改,從而進(jìn)行render的重新渲染,這就是數(shù)據(jù)的雙向綁定了,數(shù)據(jù)驅(qū)動視圖,視圖驅(qū)動數(shù)據(jù)嘛

總結(jié):受控組件與非受控組件就是一個概念,表明當(dāng)前的組件是否受控,是否是一個單獨(dú)的與其他內(nèi)容都無任何交互的組件,簡單來說,完全獨(dú)立的一個組件,就可以看作一個非受控組件,其他的都時受控組件

到此，關(guān)于“react非受控組件指的是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！