您好,登錄后才能下訂單哦!
這篇文章主要介紹了react中組件名稱必須大寫的原因,具有一定借鑒價值,需要的朋友可以參考下。下面就和我一起來看看吧。
react中組件名稱的首字母必須要用大寫。原因:React中使用JSX語法,但瀏覽器無法識別JSX語法,需通過babel對JSX語法進(jìn)行轉(zhuǎn)義;而如果組件的首字母為小寫時,其會被認(rèn)定為原生DOM標(biāo)簽,創(chuàng)建一個不存在的標(biāo)簽是會報錯的。
react組件名稱的首字母一定要用大寫
錯誤的寫法: 組件首字母沒有大寫
function clock(props){ return ( <p> <h2>現(xiàn)在的時間是{props.date.toDateString()}</h2> </p> ) }
正確的寫法:
function Clock(props){ return ( <p> <h2>現(xiàn)在的時間是{props.date.toDateString()}</h2> </p> ) }
那究竟是為什么呢?
JSX語法 向 真實DOM的轉(zhuǎn)換
我們在 React 中都是寫的 JSX語法,從 JSX語法 到頁面上的 真實DOM大概需要經(jīng)歷以下幾個階段:JSX語法 —> 虛擬DOM(JS對象) —> 真實DOM。
因為瀏覽器是無法識別JSX語法的,因此我們需要通過 babel 對JSX語法進(jìn)行轉(zhuǎn)義
,然后才能生成虛擬DOM對象,而原因就是在這里。我們可以看一下babel是如何轉(zhuǎn)義JSX語法的:
babel在進(jìn)行轉(zhuǎn)義JSX語法時,是調(diào)用了 React.createElement() 這個方法
,這個方法需要接收三個參數(shù):type, config, children
。第一個參數(shù)聲明了這個元素的類型。
對比上面兩張圖,圖一中,我在創(chuàng)建自定義組件時沒有首字母大寫
。 而 babel 在轉(zhuǎn)義時把它當(dāng)成了一個字符串 傳遞進(jìn)去了;圖二中,我把首字母大寫了
,babel 在轉(zhuǎn)義時傳遞了一個變量進(jìn)去。
問題就在這里,如果傳遞的是一個字符串,那么在創(chuàng)建虛擬DOM對象時,React會認(rèn)為這是一個簡單的HTML標(biāo)簽,但是這顯然不是一個簡單的HTML標(biāo)簽,因此去創(chuàng)建一個不存在的標(biāo)簽肯定是會報錯的。
如果首字母大寫,那么就會當(dāng)成一個變量傳遞進(jìn)去,這個時候React會知道這是一個自定義組件,因此他就不會報錯了。
所以:
同理,上述錯誤的寫法因為是小寫,所以babel就把clock當(dāng)作是標(biāo)簽生成了,而html中又沒有這個元素,所以導(dǎo)致以一種比較奇怪的方式存在
以上就是react中組件名稱必須大寫的原因的詳細(xì)內(nèi)容了,看完之后是否有所收獲呢?如果想了解更多相關(guān)內(nèi)容,歡迎來億速云行業(yè)資訊!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。