react非受控組件指的是什么

這篇文章主要介紹“react非受控組件指的是什么”，在日常操作中，相信很多人在react非受控組件指的是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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非受控組件指的是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！