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...