React 源碼閱讀-9_040

React 源碼閱讀-9

繼續閱讀react 16.8.6源碼

以前寫的就是至關於的一個學習的筆記,雖然工做中的技術都是 react 相關,可是80%都是一些日常不多涉及到的,致使本身對 react的認識相對比較片面.一些 react的api不多用到,經過 react閱讀,系統地熟悉了一下 react全部的 api以及一些相關特性使用場景.繼續根據官方的文檔和 react.js閱讀源碼.

一些準備工做

• 官方貢獻指南

https://zh-hans.reactjs.org/d...

ReactSymbols

The Symbol used to tag the ReactElement-like types 即 用於標記相似ReactElement的類型的Symbol;

若是沒有原生的 Symbol 符號或 polyfill，則使用普通數字進行表示。

採用的數字是十六進制;

const hasSymbol = typeof Symbol === 'function' && Symbol.for;

Symbol.for(key)方法會根據給定的鍵 key，來從運行時的 symbol 註冊表中找到對應的 symbol，若是找到了，則返回它，不然，新建一個與該鍵關聯的 symbol，並放入全局 symbol 註冊表中。

返回由給定的 key 找到的 symbol，不然就是返回新建立的 symbol

和 Symbol() 不一樣的是，用 Symbol.for()方法建立的的 symbol 會被放入一個全局 symbol 註冊表中。Symbol.for() 並非每次都會建立一個新的 symbol，它會首先檢查給定的 key 是否已經在註冊表中了。假如是，則會直接返回上次存儲的那個。不然，它會再新建一個

export const REACT_ELEMENT_TYPE = hasSymbol
  ? Symbol.for('react.element')
  : 0xeac7;
export const REACT_PORTAL_TYPE = hasSymbol
  ? Symbol.for('react.portal')
  : 0xeaca;
export const REACT_FRAGMENT_TYPE = hasSymbol
  ? Symbol.for('react.fragment')
  : 0xeacb;
export const REACT_STRICT_MODE_TYPE = hasSymbol
  ? Symbol.for('react.strict_mode')
  : 0xeacc;

• 爲何要賦值爲十六進制的數字

  • 0xeac7看起來有點像React
  • React 爲了保持一致性依然會在元素中定義$$typeof屬性，只不過它會被設置成一個 number 類型的值——0xeac7等
  • https://juejin.im/entry/5c170... 解決了疑惑,防止xss注入攻擊

https://developer.mozilla.org...