React: $$typeof是什么 和 JSX中的组件名要以大写字母

[leslie1943]

React: $$typeof是什么属性

<test bgcolor="#ffa7c4">hi</test>
// 实际上
React.createElement(
  /* type */ 'test',
  /* props */ { bgcolor: '#ffa7c4' },
  /* children */ 'hi'
);

// 得到
const element = {
  type: 'test',
  props: {
    bgcolor: '#ffa7c4',
    children: 'hi',
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element'),
}

• 目的是为了放置 XSS 攻击, 因为 Symbol无法被序列化, 所以 React可以通过有没有$$typeof属性来判断当前的element对象是从数据库来的还是自己生成的.
• JSON 不支持 Symbol类型 ===> JSON 中无法传递 Symbol
• 如果没有这个$$typeof属性, react会拒绝处理该元素

React: JSX中的组件名要以大写字母

• 因为 React 要知道当前渲染的是组件还是 HTML 元素.