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

下面截图是上面代码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
    );
}