react原始碼解讀之ReactSymbols. js

語言: CN / TW / HK

「這是我參與11月更文挑戰的第26天,活動詳情檢視:2021最後一次更文挑戰」。

在看react原始碼時,好多ReactSymbols. js檔案裡的內容。啊,我爆炸。出鏡率這麼高,看來我得深入瞭解一下你。

ReactSymbols用來幹什麼

用來標記類react虛擬節點型別,如果沒有本地識別符號或者polyfill,為了更好的效能表現,將會使用純數字。

export let REACT_ELEMENT_TYPE = 0xeac7

敲重點,不應該是常量嗎,怎麼使用了let。問號臉!

這裡定義了一個React元素型別,原來答案就蘊含在註釋裡。並不是所有牛奶都叫特侖蘇,也不是所有瀏覽器都支援Symbol型別。

2015年6月,在一個不同尋常的一天,es6橫空出世,Symbol型別也被正式納入js的原始型別。

這裡,react為了相容老舊的瀏覽器,才使用了if語句和let變數。

js const symbolFor = Symbol. for REACT_ELEMENT_TYPE =symbolFor("react.element")

這裡react使用了字首以避免衝突。

Symbol.for(key) 方法會根據給定的鍵 key,來從執行時的 symbol 登錄檔中找到對應的 symbol,如果找到了,則返回它,否則,新建一個與該鍵關聯的 symbol,並放入全域性 symbol 登錄檔中。

簡單來說,這些識別符號用來準確得判斷react中的物件型別。

同時值得注意的是一個方法。 js export function getIteratorFn(maybe Iterable) { if(maybeIterable === null || typeof maybeIterable !== "object") {return null} const maybeIterable =maybeIterable[MAYBE_ITERATOR_SYMBOL] if (typeof maybeIterable === "function") { return maybeIterable } return null }

該方法返回一個遍歷函式。

Symbol.iterator 為每一個物件定義了預設的迭代器。該迭代器可以被 for...of 迴圈使用。 我們回顧一下,在ReactChlidren. js裡,它是用來返回react節點陣列的遍歷器。然後通過迭代器的next方法迭代每一個react節點,用以統計react節點的數量。

下面是ReactSymbols定義的型別識別符號: - REACT_ELEMENT_TYPE,React元素型別,用以標識這是一個react元素。 - REACT_PORTAL_TYPE,React插槽型別型別,這種型別可以在父元件的任意位置插入一個子元件。

  • REACT_FRAGMENT_TYPE,react碎片型別,這種型別可以建立一個不帶根標籤的碎片。

隨著時間的推移,我們將會認識更多的react識別符號。

一句話總結,react識別符號全域性唯一,用來準確返回react物件型別,作用類似uuid。 感謝讀者閱讀,不積跬步,無以成江海,動動小手,歡迎點贊!