首页 > HTML > 文章正文

React源码阅读-9_040

更新时间:2019-10-21

React 源码阅读-9

继续阅读react 16.8.6源码

之前写的就是相当于的一个学习的笔记,虽然工作中的技术都是 react 相关,但是80%都是一些平常很少涉及到的,导致自己对 react的认识相对比较片面.一些 reactapi很少用到,通过 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...

原文链接:https://segmentfault.com/a/1190000020744688

相关文章
相关标签