为什么react元素有一个$$type属性？

可能以为在编写的是JSX：

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

但是实际上，你调用的是一个函数。

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

这个函数返回一个Object对象，叫这个对象为React元素。它告诉React接下来要渲染什么。

编写的组件将组成一个组件树。

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

如果你经常使用React，你可能会对type、props、key、ref属性很熟悉，但是，什么是typeof属性？为什么他的属性是一个Symbol值？

从设计上来说，React 元素是一个普通的对象。

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

React有一些有效的例子来支持像我刚刚在上面做的那样编写的普通元素对象。

对于优化编译器，在worker之间传递UI元素或者将JSX与React包解耦是有用的。

但是，如果服务器侧有一个允许用户存储任意JSON对象的漏洞，而客户端代码期待一个字符串，这可能会成为一个问题：

// Server could have a hole that lets user store JSON
let expectedTextButGotJSON = {
      type: 'div',
    props: {
          dangerouslySe: {
        __html: '/* put your exploit here */'
      },
    },
    // ...
  };
  let message = { text: expectedTextButGotJSON };

  // Dangerous in React 0.13
  <p>
    {message.text}
  </p>

在这种情况下，React 0.13很容易受到XSS攻击。这种攻击取决于现有的服务器漏洞。 

在React 0.14版本，它的修复方法是对每一个React元素使用Symbol来进行标记。

不能把Symbol放在JSON中，因此，即使服务器具有安全漏洞并返回JSON而不是文本，该JSON也不能包含Symbol.for（'react.element'）。 React将检查元素的$typeof属性，如果$typeof属性丢失或无效，将拒绝处理该元素