为什么react元素有一个$$type属性?
2023-09-14 09:13:49 时间
可能以为在编写的是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属性丢失或无效,将拒绝处理该元素
相关文章
- 深入理解transform属性之翻转效果
- react开发教程(六)React与DOM
- React系列——websocket群聊系统在react的实现
- [Aaronyang] 写给自己的WPF4.5 笔记[2依赖属性]
- [React] Using react-styleguidist for Component demo
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Format Date and Time Using react-intl FormattedDate and FormattedTime
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [React] Create an Auto Resizing Virtualized List with react-virtualized
- python-面向对象-09_类属性和类方法
- [React Testing] Mock react-transition-group in React Component Tests with jest.mock
- [React Testing] Test react-router-dom Router Provider with createMemoryHistory
- [React] Ensure all React useEffect Effects Run Synchronously in Tests with react-testing-library
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- [React Intl] Render Content with Placeholders using react-intl FormattedMessage
- C# DataRow.ItemArray 属性
- SAP 电商云 Spartacus UI 有状态 的 url 和 title 属性的赋值代码
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Android 11.0 12.0无源码apk设置默认启动Launcher的相关属性
- Android 9.0 app全屏通过系统属性控制手势上滑是否显示虚拟导航栏和状态栏
- Android反射set/get系统属性SystemProperties(三)
- C# Control.DoubleBuffered 属性的使用
- React(一)react概述、组件、事件
- react是否支持给标签设置自定义的属性,比如给video标签设置webkit-playsinline?
- computed(计算属性)
- 【taro react hooks 错误解决】---- Warning: Can‘t perform a React state update on an unmounted component.
- 【taro react】---- 编译微信小程序后报错:Error: Minified React error #321;