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