圖片來源于互聯網

當在控制臺打印一個 React 組件的時候，能看出組件就是一個對象，也可以說是虛擬 dom，這個對象上面包含了所需要渲染的 dom 節點的標簽名稱、屬性、子節點等信息。同時也有一個 $$typeof 的屬性。

$$typeof 是如何添加在 React 對象上的

jsx 語法在被 babel 解析的時候調用 React.createElement 方法，那么我們看一下 createElement 方法的實現

export function createElement(type, config, children) {...return ReactElement(type,key,ref,self,source,ReactCurrentOwner.current,props,) } 復制代碼

createElement 方法返回了 ReactElement 方法的執行結果，那么看一下 ReactElement 方法的實現

const ReactElement = function(type, key, ref, self, source, owner, props) {const element = {$$typeof: REACT_ELEMENT_TYPE,type: type,key: key,ref: ref,props: props,_owner: owner,}...return element; } 復制代碼

從上面的代碼中可以看到 $$typeof 屬性就是在 ReactElement 方法中添加到 React 對象上的。其值為變量 REACT_ELEMENT_TYPE。

變量 REACT_ELEMENT_TYPE 是如何定義的

在 ReactSymbols.js 文件中可以看到變量 REACT_ELEMENT_TYPE 的定義

const hasSymbol = typeof Symbol === 'function' && Symbol.for;export const REACT_ELEMENT_TYPE = hasSymbol? Symbol.for('react.element'): 0xeac7;... 復制代碼

如果當前瀏覽器支持 Symbol 則 REACT_ELEMENT_TYPE 為 Symbol 類型的變量，否則為 16 進制的數字。

添加 $$typeof 的意義

為了安全

假如前端期望從接口中獲取一個字符串渲染在頁面中

...render() {<div>{serverData.text}</div> } 復制代碼

然而由于服務端在數據入庫時存在漏洞，有用戶惡意存入了這樣的數據

const text = {key: nulltype: 'script',props: {src: 'http://...'}, } 復制代碼

如果這條數據被成功渲染，那么就是一個存在風險的第三方 script 標簽入侵到了當前用戶的頁面，它能做什么完全取決于它想做什么，比如獲取并發送用戶的 cookie、localStorage，比較可愛的情況是給用戶的頁面上彈十萬個彈窗。

為了防止這種情況的發生，React 0.14 版本加入了 $$typeof

數據庫是無法存儲 Symbol 類型數據的，所以用戶惡意存入的數據是無法帶有合法的 $$typeof 字段的。

當 React 在渲染的時候加上對 $$typeof 合法性的驗證即可防止惡意代碼的插入。低版本不支持 Symbol 的瀏覽器是沒有這個安全特性的。

轉載于:https://juejin.im/post/5cecf286f265da1b83336dbe

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的React 中 $$typeof 的作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。