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(&#39;content&#39;))

非受控元件的解釋

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

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

#靜態頁面開發.在靜態頁面的開發的時候,我們通常不使用框架,只用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=&#39;123&#39; />
                <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的重新渲染,這就是資料的雙向綁定了,資料驅動視圖,視圖驅動資料嘛

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

【相關推薦：javascript影片教學、web前端】

#

以上是react非控制元件是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！