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