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

译文原文: 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 中。

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