React 中 $$typeof 的作用

最新推荐文章于 2024-07-29 09:33:33 发布

weixin_33795806

最新推荐文章于 2024-07-29 09:33:33 发布

阅读量2.3k

点赞数

文章标签： javascript 前端数据库 ViewUI

原文链接：https://juejin.im/post/5cecf286f265da1b83336dbe

版权

React 中的 $$typeof 属性是在 JSX 被 babel 解析时通过 React.createElement 添加到对象上的，用于确保组件的安全性。REACT_ELEMENT_TYPE 在支持 Symbol 的浏览器中为 Symbol 类型，否则为十六进制数字。添加 $$typeof 的主要目的是防止第三方脚本注入，通过验证该字段来避免恶意代码执行。在渲染时检查 $$typeof 可以保护应用免受潜在攻击。

摘要由CSDN通过智能技术生成

图片来源于互联网

当在控制台打印一个 React 组件的时候，能看出组件就是一个对象，也可以说是虚拟 dom，这个对象上面包含了所需要渲染的 dom 节点的标签名称、属性、子节点等信息。同时也有一个 $$typeof 的属性。

$$typeof 是如何添加在 React 对象上的

jsx 语法在被 babel 解析的时候调用 React.createElement 方法，那么我们看一下 createElement 方法的实现

export function createElement(type, config, children) {

    ...

    return ReactElement(
        type,
        key,
        ref,
        self,
        source,
        ReactCurrentOwner.cur