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…