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

简介: 为什么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将检查元素的typeoftypeof属性,如果typeof属性丢失或无效,将拒绝处理该元素

相关文章
|
4月前
|
前端开发 JavaScript API
第八章 react组件实例中三大属性之ref
第八章 react组件实例中三大属性之ref
|
4月前
|
前端开发 数据库
第七章 react组件实例中三大属性之props
第七章 react组件实例中三大属性之props
|
15天前
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法,包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`,并探讨了常见的问题及解决方法,如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率,编写出更健壮的代码。
42 13
|
1月前
|
JavaScript 前端开发 容器
React组件属性refs(七)
【8月更文挑战第14天】React组件属性refs(七)
45 0
React组件属性refs(七)
|
4月前
|
存储 前端开发 API
第六章 react组件实例中三大属性之State
第六章 react组件实例中三大属性之State
|
1月前
|
前端开发 JavaScript
|
21天前
|
前端开发 JavaScript
React 组件和 React 元素有什么区别?
【8月更文挑战第31天】
22 0
|
1月前
|
前端开发 JavaScript
React——组件的三大核心属性【七】
React——组件的三大核心属性【七】
24 0
|
4月前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
154 0
|
3月前
|
前端开发
React三大属性
React三大属性
23 0