React学习笔记 - 基础概念(二) React Element

最新推荐文章于 2025-06-11 21:34:41 发布

走在前端大牛的路上

最新推荐文章于 2025-06-11 21:34:41 发布

阅读量889

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： react

本文链接：https://blog.youkuaiyun.com/windfromcn/article/details/118368078

学习笔记专栏收录该内容

15 篇文章

订阅专栏

本文探讨了React Element的key、props、ref、type等属性及其作用，尤其是key在virtual DOM中的角色。同时，文章讲解了React如何通过$$typeof字段防止早期版本的XSS攻击，并介绍了React的Cross-Site Scripting（XSS）防御策略，包括客户端的转义和服务器端的JSON过滤。最后提到了React提供的isValidElement方法用于判断对象是否为React元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面截图是上面代码createElement后的产物，本质上就是个React Object（ extends Object）：

这些属性的含义如下：

key: 组件的key，主要用在virtual dom上，compare diff和move element

props：组件属性，来源于父组件或者HOC，或者类似的外部传递

ref：当前的dom引用

type: 组件类型

_owner: 是React Component，创建react component的组件，空值为null

$$typeof: 早期的React（0.13）版本中很容易受到 XSS 攻击，为了解决此问题，字段名是使用$$typeof，value使用的是Symbol （问题：为什么可以解决XSS的问题）

一些需要知道的内容：

Cross-Site Scripting（跨站脚本攻击）简称XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如Cookie、SessionID 等，进而危害数据安全

React如何解决此问题，通过两种方式：（参考文档 why-do-react-elements-have-typeof-property）
- 编码时：React等新兴代码库会进行转义（客户端）
- 数据传输时：由于JSON不支持$$属性名，所以该属性会被过滤掉（服务器端）

如何区分object是否是react object？React提供了isValidElement方法

/**
* Verifies the object is a ReactElement.
* See 
https://reactjs.org/docs/react-api.html#isvalidelement

* @param {?object} object
* @return {boolean} True if `object` is a ReactElement.
* @final
*/
export function isValidElement(object) {
    return (
        typeof object === 'object' &&
        object !== null &&
        object.$$typeof === REACT_ELEMENT_TYPE
    );
}