react源码解读之ReactSymbols. js

「这是我参与11月更文挑战的第26天,活动详情查看:2021最后一次更文挑战」。

在看react源码时,好多ReactSymbols. js文件里的内容。啊,我爆炸。出镜率这么高,看来我得深入了解一下你。

ReactSymbols用来干什么

用来标记类react虚拟节点类型,如果没有本地标识符或者polyfill,为了更好的性能表现,将会使用纯数字。

export let REACT_ELEMENT_TYPE = 0xeac7

敲重点,不应该是常量吗,怎么使用了let。问号脸!

这里定义了一个React元素类型,原来答案就蕴含在注释里。并不是所有牛奶都叫特仑苏,也不是所有浏览器都支持Symbol类型。

2015年6月,在一个不同寻常的一天,es6横空出世,Symbol类型也被正式纳入js的原始类型。

这里,react为了兼容老旧的浏览器,才使用了if语句和let变量。

const symbolFor = Symbol. for
REACT_ELEMENT_TYPE =symbolFor("react.element")
复制代码

这里react使用了前缀以避免冲突。

Symbol.for(key) 方法会根据给定的键 key,来从运行时的 symbol 注册表中找到对应的 symbol,如果找到了,则返回它,否则,新建一个与该键关联的 symbol,并放入全局 symbol 注册表中。

简单来说,这些标识符用来准确得判断react中的对象类型。

同时值得注意的是一个方法。

export function getIteratorFn(maybe Iterable) {
if(maybeIterable === null || typeof maybeIterable !== "object") {return null}
const maybeIterable =maybeIterable[MAYBE_ITERATOR_SYMBOL]
if (typeof maybeIterable === "function") {
   return maybeIterable
}
return null
}
复制代码

该方法返回一个遍历函数。

Symbol.iterator 为每一个对象定义了默认的迭代器。该迭代器可以被 for...of 循环使用。

我们回顾一下,在ReactChlidren. js里,它是用来返回react节点数组的遍历器。然后通过迭代器的next方法迭代每一个react节点,用以统计react节点的数量。

下面是ReactSymbols定义的类型标识符:

  • REACT_ELEMENT_TYPE,React元素类型,用以标识这是一个react元素。

  • REACT_PORTAL_TYPE,React插槽类型类型,这种类型可以在父组件的任意位置插入一个子组件。

  • REACT_FRAGMENT_TYPE,react碎片类型,这种类型可以创建一个不带根标签的碎片。

随着时间的推移,我们将会认识更多的react标识符。

一句话总结,react标识符全局唯一,用来准确返回react对象类型,作用类似uuid。 感谢读者阅读,不积跬步,无以成江海,动动小手,欢迎点赞!

猜你喜欢

转载自juejin.im/post/7035583346767986725