世界上最伟大的投资就是投资自己的教育

首页React
xiaohesong · 凡人

为什么 react element 有个 $$typeof 属性

xiaohesong发布于395 次阅读

译文原文: Why-Do-React-Elements-Have-a-$$typeof-Property
英文原文: Why Do React Elements Have a $$typeof Property?

你可能认为你在写JSX:

<marquee bgcolor="#ffa7c4">hi</marquee>

但是实际上是你在调用一个函数:

React.createElement(
  /* type */ 'marquee',
  /* props */ { bgcolor: '#ffa7c4' },
  /* children */ 'hi'
)

这个函数给你返回了一个对象,我们把这个对象叫做 React 元素。它告诉 React 接下来渲染什么,组件就是返回对象🌲。

{
  type: 'marquee',
  props: {
    bgcolor: '#ffa7c4',
    children: 'hi',
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element'), // 🧐 Who dis
}

像上面这样,如果你使用 React 你可能熟悉type, props, key, ref这些字段。但是$$typeof是什么?为什么会有个Symbol作为值?

这个也是你在写react的时候不需要知道的一件事,但是如果你知道了,那感觉会很棒。在这篇文章中还有一些你可能想知道的安全性的提示。也许有一天你会编写自己的 UI 库,所有这些都会派上用场。我希望是这样的。


在客户端 UI 库变得普遍并添加一些基本保护之前,应用程序代码通常构造HTML并将其插入DOM

const messageEl = document.getElementById('message');
messageEl.innerHTML = '<p>' + message.text + '</p>';

这就可以了,除非当message.text是像'<img src onerror="stealYourPassword()">'这样的时候。 你不希望陌生人编写的内容显示在应用程序呈现的 HTML 中。

(有趣的事实:如果你只做客户端渲染,这里的

本站文章均为原创内容,如需转载请注明出处,谢谢。

0 条回复
暂无回复~~
喜欢
我的微信官网服务号精品文章订阅号微信视频号
程序员随风
统计信息
    学员: 22232
    视频数量: 1463
    文章数量: 460

© 汕尾市求知科技有限公司 | 专业版网站 | 关于我们 | 在线学员:1147

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top