为什么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属性丢失或无效,将拒绝处理该元素

相关文章
|
9月前
|
前端开发 JavaScript API
第八章 react组件实例中三大属性之ref
第八章 react组件实例中三大属性之ref
108 0
|
9月前
|
前端开发 数据库
第七章 react组件实例中三大属性之props
第七章 react组件实例中三大属性之props
118 0
|
4月前
|
前端开发 JavaScript 容器
React 元素渲染
10月更文挑战第7天
41 1
|
5月前
|
前端开发
React属性之context属性
React中的Context属性用于跨组件传递数据,通过Provider和Consumer组件实现数据的提供和消费。
51 3
|
4月前
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式:作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件,对比分析了每种方式的优缺点,最终推荐将组件作为函数传递,因为它提供了更好的可控性、灵活性和可扩展性。
67 0
|
5月前
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法,包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`,并探讨了常见的问题及解决方法,如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率,编写出更健壮的代码。
144 13
|
5月前
|
前端开发
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符
本文讨论了在React使用hooks时遇到的一个问题:state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值,解决了因数据更新不及时导致的问题。
103 0
|
6月前
|
JavaScript 前端开发 容器
React组件属性refs(七)
【8月更文挑战第14天】React组件属性refs(七)
67 0
|
6月前
|
前端开发 JavaScript
|
9月前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
324 0