【Dan】关于react - 为什么React元素有一个$$typeof属性？ - 《前端技术杂记》

[TOC]

  const RenderText = () => {
    return <div>{text}</div>;
  };

  useEffect(() => {
    console.log(RenderText());
    console.log(RenderText().$$typeof);
  }, []);

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

如果你用过 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 的值类似’alert(“xss”)’时候，你不希望弹出一个alert。

<!DOCTYPE html>
<html lang="en">

<body>
    <text id="message"></text>
    <script>
        const messageEl = document.getElementById('message');
        const message = {
            text: '<script>console.log("xss")</script>'
        }
        messageEl.innerHTML = '<p>' + message.text + '</p>';;
    </script>
</body>

</html>

（有趣的是：如果你只是在前端渲染，这里为