在react中，非受控組件是不被父組件控制的組件；非受控組件也就是一個獨立組件，不需要傳值也沒有任何與當前組件的父組件有所交集，在封裝組件時，只有在當前組件只做展示用途且沒有任何不同的時候才會封裝為非受控組件。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
什麼叫非受控組件
我們從兩個字入手,那就是組件,受控與非受控是從組件的角度出發來說出的概念,字面意思就是組件時不被控制的,不被誰控制,當然是不被父組件控制,那麼不受控制的組件有什麼特性,就是一切邏輯只與自身有關,與其他的組件沒有通信與交集
在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的重新渲染,這就是資料的雙向綁定了,資料驅動視圖,視圖驅動資料嘛
總結:受控組件與非受控組件就是一個概念,表明當前的組件是否受控,是否是一個單獨的與其他內容都無任何交互的組件,簡單來說,完全獨立的一個組件,就可以看作一個非受控組件,其他的都時受控組件